CSS3 Tutorial: Border radius and rounded corners

The implementation of the fillet in the page is a very troublesome problem, although there are many ways to implement it, but it is more troublesome. In this article, let's look at how to use CSS3 Border-radius to implement rounded div.

Cross-browser compatibility

As mentioned in the previous "CSS3 Series Tutorial: Introduction," Not all browsers support CSS3, but those better browsers choose to be compatible rather than directly supported. We have two prefixes that we can use.

Prefix:

-moz (e.g.-moz-border-radius) for Firefox
-webkit (for example:-webkit-border-radius) for Safari and Chrome.

CSS3 rounded corners (all)

The ability to create rounded corners that are once very popular without using pictures is a time-consuming task, creating the perfect little rounded images that are used as appropriate CSS backgrounds. Now, with CSS3, we can create rounded corners with a few lines of code.

This is a 5px normal border and 15px border radius settings:

#roundCorderC {

font-family:arial;

border:5px solid #dedede;

-moz-border-radius:15px;

-webkit-border-radius:15px;

padding:15px 25px;

Height:inherit;

width:590px;

}

Browser support:

Firefox (3.05+ ...)

Google Chrome (1.0.154+ ...)

Google Chrome (2.0.156+ ...)

Internet Explorer (IE7, IE8)

Opera 9.6

Safari (3.2.1+ windows)

CSS3 rounded corners (individual)

Of course, the four corners of a div do not need all rounded corners, you can individually achieve rounded corners.

#roundCornerI {

font-family:arial;

border:5px solid #dedede;

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

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

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

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

-webkit-border-top-left-radius:15px;

-webkit-border-top-right-radius:0px;

-webkit-border-bottom-left-radius:0px;

-webkit-border-bottom-right-radius:15px;

padding:15x 25px;

Height:inherit;

width:590px;

}

Browser support:

Firefox (3.05+ ...)

Google Chrome (1.0.154+ ...)

Google Chrome (2.0.156+ ...)

Internet Explorer (IE7, IE8)

Opera 9.6

Safari (3.2.1+ windows)