CSS3 Properties Border-radius draw a variety of graphics

Border-radius, you might think that this property is used to draw fillets, yes, but besides, it can do something else. Radius actually refers to the radius of the circle in which the bounding rectangle is located, which not only creates rounded corners, but also creates an elliptical angle (7th), which is presented in different order and size, and can be drawn into a variety of shapes. CSS3 An example is the effect that is obtained by defining Border-radius.

It's really great to combine these basic graphics and to depict different patterns. Here are just a few simple examples, more graphics, do it yourself. Only Border-radius can achieve such a rich pattern, if added border size, gradient color and shadow, will add more texture.

Grammar and interpretation

Border-radius can define the same corner of the style by value, and define each corner separately. The table below explains the effects of each notation.

The The The A set of four values preceding the The

Syntax	explanation
border-radius:10px	will create four sizes of rounded corners, 1 and 2.
border-radius:10px 15px 10px 5px;	four values represent the upper-left corner, upper-right corner, lower-right corner, and lower-right corner, respectively.
border-radius:10px 15px;	The first value represents the upper-left corner, the lower-right corner, and the second value represents the upper-right corner and lower-left corner.
border-radius:10px 15px 5px;	first value represents the upper-left corner, the second value represents the upper-right corner, the lower-left corner, and the third value represents the lower-right corner.
border-bottom-left-radius:20px 10px;	creates an asymmetric angle – an elliptical angle.
border-radius:20px/10px;	when you write an ellipse, you can create four elliptical corners with a short notation.
border-radius:10px 20px 30px 40px	Four values represent the radius of the Four Corners (the same as the horizontal and vertical radii), 11.
border-radius:10px 20px 30px 40px/20px 50px 30px 10px;	slash represents a horizontal radius of four corners, and a set of four values that follow the slash represents the vertical radius of Four corners, respectively. 7.
border-radius:10px 20px 40px/20px 50px;	front and back each group represents a four-corner horizontal radius and four corner vertical radii, respectively. Two-value, three-value sequential rules you know that, huh?

For each corner, the two values represent the horizontal and vertical radii of the angle. If there are four values, the table above has an explanation. Look at the picture below, it may be clearer.

Relationship of border size and outer radius, inner radius

The actual inner radius is equivalent to the outer radius minus the corresponding border size. If at least one of the subtracted values is a negative value or 0, the inner radius is a right angle.
In any case, the adjacent two edges will form a smooth line.

Application examples

Border-radius can be used to make very vivid effects. You can click on the link below to view:
Border-radius gradients, Box shadow written Opra Logo with CSS

Compatible with older versions of Firefox

To be compatible with Firefox3.6 and the following versions, the vendor prefix needs to be written, for-moz-border-radius:5px, for each corner of the syntax:-moz-border-radius-topleft:5px; Pay special attention to this is different from the standard notation.

CSS3 Properties Border-radius draw a variety of graphics