CSS3 enables cross-browser round-corner support Ie9,safari,chrome

Article Introduction: now CSS3 can easily achieve the cross browser fillet effect, including the Firefox high version, Ie9,safari,chrome and other high-end browsers.

W Tutorial Bloggers prefer the box model of rounded corners, now CSS3 can easily achieve the cross browser fillet effect, including Firefox high version, Ie9,safari,chrome and other high-end browsers.

We're going to define a box model like this:

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

Effects in Firefox, and Chrome:

Where-moz-border-radius is the private property of Firefox to achieve rounded corners, and-webkit-border-radius is the private property of the WebKit kernel browser (such as Safari and Chrome) to achieve rounded corners.

We can also set the property values of 4 rounded corners, such as the style:

-moz-border-radius-topleft:50px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:50px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;

The results obtained are as follows:

We can also use CSS abbreviations to achieve rounded effects, such as the following code:

-moz-border-radius:50px 30px 20px 10px;
-webkit-border-radius:20px 10px 5px 50px;

Of course, we can also add border properties to the box model:

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:10px solid #69F;