| Article Introduction: in fact, CSS3 to achieve rounded corners only need to set a property: Border-radius (Border radius), as long as the setting of a value can be set at the same time Four corners of the radius. |
In fact, CSS3 to achieve rounded corners only need to set a property: Border-radius (Border radius), as long as the setting of a value can be set at the same time four fillet radius
Give you a div
Set his fillet radius: border-radius:15px;
Border-radius can set 1 to 4 values at the same time. If you set 1 values, this value is used for 4 rounded corners. If you set 2 values, the upper-left and lower-right corners use the 1th value, and the upper-right corner and lower-left corner use the 2nd value. If you set 3 values, the upper-left corner uses the 1th value, the upper-right and lower-left corners use the 2nd value, and the lower-right corner uses the 3rd value. If 4 values are set, the upper-left corner, upper-right corner, lower-right corner, lower-left corner (clockwise order) are followed.
support for Border-radius browsers:
IE 9, Opera 10.5, Safari 5, Chrome 4, and Firefox 4 all support the above Border-radius properties.
Earlier versions of Safari and Chrome support the-webkit-border-radius properties, and earlier versions of Firefox supported-moz-border-radius properties.
At present, in order to ensure compatibility, simply set-moz-border-radius and Border-radius at the same time.
-moz-border-radius:15px;
border-radius:15px;
(Note: Border-radius must be placed in the final declaration, otherwise it may be invalidated.) )
In addition, an earlier version of Firefox's single rounded statement differs slightly 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)
These are
Border-radius simple to achieve rounded corners
