CSS3 (Border-radius) border rounded corners detailed

For a traditional fillet generation scenario, you must use multiple pictures as background patterns. The advent of CSS3, so that we no longer have to waste time to make these pictures, only need to Border-radius properties, support browser IE 9, Opera 10.5, Safari 5, Chrome 4 and Firefox 4 First, Border-radius propertiesCSS3 fillet Simply set a property: Border-radius (meaning "border radius"). If you provide a value for this property, you can set the radius of the four rounded corners at the same time. All valid CSS metrics can be used: EM, px, percent, and so on. For example, here is a div box (the width is 200, the background is red, the border is 2px solid #000) and now the fillet radius is set to 50px, namely:

Border-radius:50px;    

This statement sets both the horizontal radius and the vertical radius of each fillet to 50px.Border-radius can set 1 to 4 values at a time. (Think of our previous margin and padding) if you set a value of 1, this value is used for 4 rounded corners. If you set a value of two, the upper-left and lower-right corners use the first value, the upper-right corner and the lower-left corner use the second value. If you set a value of three, the upper-left corner uses the first value, the second value is used in the upper-right corner and the lower-left corner, and the third value is used in the lower-right corner. If you set four values, the upper-left corner, the upper-right corner, the lower-right corner, and the lower-left corner (clockwise order) are followed. Cases:

Border-radius:50px25px;  Indicates that the first value is used in the upper-left and lower-right corners, and the second value is used in the upper-right and lower-left        Corners

 
 border -radius:< Span style= "LINE-HEIGHT:28PX; Color: #006666; " >25px 10px< Span style= "LINE-HEIGHT:28PX; Color: #000000; " > 50px;    

Border-radius:25px10px50px0;  Upper left corner, upper right corner, lower right corner, lower left corner (clockwise order)        

Border-radius can also set a second set of values with a slash. At this point, the first set of values represents the horizontal radius, and the second set of values represents the vertical radius. The second set of values can also be set from 1 to 4 values, applying the same rule as the first set of values.

Border-radius:50px/25px;      

 

Border-Radius: 100px 25px 80px 5px / 45px 25px 30px< Span style= "LINE-HEIGHT:28PX; Color: #000000; " > 15px;   

ii. setting of single rounded cornersIn addition to setting four fillets at the same time, you can set each corner individually. For Four Corners, the CSS3 provides four separate properties: * Border-top-left-radius * Border-top-right-radius * Border-bottom-right-radius * border-bottom-l Eft-radius these four properties can be set from 1 to 2 values at the same time. If you set a value of 1, the horizontal radius is equal to the vertical radius. If you set 2 values, the first value represents a horizontal radius, and the second value represents the vertical radius.

Border-top-left-radius:50px;        

Border-top-left-radius:50px 100px< Span style= "LINE-HEIGHT:28PX; Color: #666600; " >; // The first value represents a horizontal radius, and the second value represents the vertical radius. 

third, the effectImplementation code:

Width:0;
Height:0;
Border:100pxSolid Gray;
Border-radius:100px;
Border-right-color:#fff;           

Implementation code

Height:100px;
Width:200px;
Background: Red;
Border-radius:100px/50px;          

CSS3 (Border-radius) border rounded corners detailed