CSS3 rounded corners

Use CSS3 border-radius property, you can make any element "corner."

Browser Support

Figures in the table represent the first browser to support the property version number.

-webkit- or -moz- previous figures expressed support for the first version of the prefix.

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

CSS3 border-radius property

Use CSS3 border-radius property, you can make any element "corner."

The following three examples:

1. Specify the background color of the rounded element:

Fillet!

2. Specify the border element fillet:

Fillet!

3. Specify the background image elements fillet:

Fillet!

Code is as follows:

Examples

# 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;
}

try it"

CSS3 border-radius - specify each fillet

If you specify only one value in the border-radius property, then it will generate four fillets.

But if you want to specify eleven at the four corners, you can use the following rules:

Four values: top left corner of the first value and the second value is the upper right corner, the lower right corner is the third, and the fourth is the bottom left corner.
Three values: top left corner of the first value and the second value is the top right and bottom left, bottom right corner of the third value
Two values: the first is the top left and bottom right corner, and the second is the upper right corner and the lower left corner
A value: the same four rounded value

The following three examples:

1. The four values - border-radius: 15px 50px 30px 5px:

2. The three values - border-radius: 15px 50px 30px:

3. The two values - border-radius: 15px 50px:

The following is the source code:

Examples

# 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;
}

try it"

You can also create an elliptical corner:

Examples

#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;
}

try it"