Detailed knowledge about fillet in CSS3

CSS3 rounded Corners

Using the CSS3 Border-radius property, you can make a fillet for any element.

Browser support

The number in the table represents the version number of the first browser that supports the property.

The number in front of-webkit-or-moz-indicates that the first version of the prefix is supported.

CSS3 Border-radius Properties

Using the CSS3 Border-radius property, you can make a fillet for any element.

The code is as follows:

#rcorners1 {    border-radius:25px;    Background: #8AC007;    padding:20px;     width:200px;    height:150px; } #rcorners2 {    border-radius:25px;    border:2px solid #8AC007;    padding:20px;     width:200px;    height:150px; } #rcorners3 {    border-radius:25px;    Background:url (paper.gif);    Background-position:left top;    Background-repeat:repeat;    padding:20px;     width:200px;    height:150px; }

CSS3 Border-radius-Specify each fillet

If you specify only one value in the Border-radius property, 4 rounded corners are generated.

However, if you want to specify one by one on Four corners, you can use the following rules:

Four values: The first value is the upper-left corner, the second value is the upper-right corner, the third value is the lower-right corner, and the fourth value is the lower-left corner.

Three values: The first value is the upper-left corner, the second value is the upper-right corner and the lower-left corner, the third value is the lower-right corner

Two values: The first value is the upper-left corner and the lower-right corner, the second value is the upper-right corner and the lower-left corner

One value: Four fillet values are the same

The following is the source code:

#rcorners4 {    border-radius:15px 50px 30px 5px;    Background: #8AC007;    padding:20px;     width:200px;    height:150px; } #rcorners5 {    border-radius:15px 50px 30px;    Background: #8AC007;    padding:20px;     width:200px;    height:150px; } #rcorners6 {    border-radius:15px 50px;    Background: #8AC007;    padding:20px;     width:200px;    height:150px; }

You can also create oval corners:

Instance

#rcorners7 {    border-radius:50px/15px;    Background: #8AC007;    padding:20px;     width:200px;    height:150px; } #rcorners8 {    border-radius:15px/50px;    Background: #8AC007;    padding:20px;     width:200px;    height:150px; } #rcorners9 {    border-radius:50%;    Background: #8AC007;    padding:20px;     width:200px;    height:150px;}

"Recommended"

1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Free CSS Online video tutorial

3. php.cn Lonely Nine-base (2)-css video tutorial