CSS3 Fillet Property Border-radius

A new Border-radius Border RADIUS attribute is added in CSS3, which is commonly used for rounded corners. This makes it no longer troublesome to make fillets, just add a Border-radius property to the objects you use, and you do not have to use picture positioning or redundant code. However, its use bottleneck is now obvious, as the effect shows that it needs to support CSS3 's modern browser, but not on some older browsers, such as IE8 and the following browsers.

CSS3 Fillet Properties Border-radius How to use:

Set four fillets at the same time simply give a value: border-radius:10px;

Each fillet can also be set separately (clockwise direction): border-radius:10px 5px 15px 20px;

If you only need to set a fillet, you can write individual CSS settings:

border-top-left-radius:10px;

border-top-right-radius:5px;

border-bottom-left-radius:15px;

border-bottom-right-radius:20px;

You can also set every two rounded corners, that is, the upper-left-right next value, upper-right-left next value: border-radius:10px 5px;

CSS3 Fillet Properties Border-radius Use Note:

CSS3 some of the properties on some of the previous versions of the browser settings are not the same, have their own private properties, such as the application of some properties in Firefox need to add-moz-, Safari and Google Chrome need to add-webkit-, Opera needs to add-o-, Internet Explorer 9 needs to add-ms-. These issues, however, have been modified in the new version to support CSS3 native properties as CSS3 publishes the recommended standards.

In order to take care of the browsing of these older browsers, we can add these private properties together. Note that the Border-radius needs to be placed on the last side, otherwise it may fail. The following (Border-radius properties are not set for opera and IE):

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

Also note that the Border-radius single fillet attribute names on older versions of Firefox are different, respectively:

-moz-border-radius-topleft:10px;

-moz-border-radius-topright:5px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:20px;

Finally, one more thing to note: Setting the Border-radius property, it is best to use the same value for each fillet, if set separately, there may be subtle differences in rendering effects on different browsers.

The article finally shared two concise CSS3 Border-radius property Settings Online tool, set the effect after copying the corresponding CSS code to add:

http://border-radius.com/,

Http://www.css88.com/tool/css3Preview/Border-Radius.html.

CSS3 Fillet Property Border-radius