This article transferred from: http://www.kwstu.com/Admin/ViewArticle/201409151549476225
The Border-radius property is primarily used to set the div fillet effect .
How to use
Border-radius: The radius value of the fillet + unit ;
Example 1
setting a div fillet radius of 10 pixels
border-radius:10px; sets the fillet radius of the object to 10 pixels.
Effect:
Border-radius can set 1 to 4 values at a time1. If you set 1 values, this value is used to represent 4 fillets.
2. If you set two values, the upper-left and lower-right corners use the first value, the upper-right corner and the lower-left corner use the second value.
3. If you set three values, the upper-left corner uses the first value, the upper-right corner and the lower-left corner use the second value, and the lower-right corner uses the third value.
4, if you set four values, then the upper left corner, the upper right corner, the lower right corner, the lower left corner (clockwise order).
Example 2
setting two value effects at a time
border-radius:10px 5px;
Effect:
Example 3
setting three value effects at a time
border-radius:20px 10px 5px;
Effect:
Example 4
setting four value effects at a time
border-radius:30px 20px 10px 5px;
Effect:
settings for single rounded corners 1, Border-top-left-radius
2, Border-top-right-radius
3, Border-bottom-right-radius
4, Border-bottom-left-radius
Note: All 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.
Example 5 single attribute set 1 values
border-top-left-radius:10px;
Effect:
Example 6 single attribute set 2 values
border-top-left-radius:10px 5px;
Effect:
Browser Support
IE 9, Opera 10.5, Safari 5, Chrome 4 and Firefox 4 support the Border-radius attribute above. Earlier versions of Safari and Chrome supported the-webkit-border-radius property, and earlier versions of Firefox supported-moz-border-radius properties, in order to ensure compatibility, You need to set both-moz-border-radius and Border-radius.
-moz-border-radius:15px;
border-radius:15px;
Note: The Border-radius must be placed in the final statement, otherwise it may fail.
In addition, earlier versions of Firefox had a single fillet statement that was slightly different from the standard syntax.
-moz-border-radius-topleft (Standard syntax: Border-top-left-radius)
-moz-border-radius-topright (Standard syntax: Border-top-right-radius)
-moz-border-radius-bottomleft (Standard syntax: Border-bottom-left-radius)
-moz-border-radius-bottomright (Standard syntax: Border-bottom-right-radius)
Recommendation: Depending on the browser, if the style and width of each rounded border are set individually, the display of each large browser may not be consistent, the safest way is to set the style and width of each rounded border to the same value, and avoid using percent values.
CSS Border-radius Rounded Corners