8.5. CSS3 fillet

8.5.1. CSS3 fillet ¶

Use CSS3 border-radius attribute, you can fillet any element.

8.5.2. Browser support ¶

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

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

8.5.3. CSS3 border-radius attribute ¶

Use CSS3 border-radius attribute, you can fillet any element.

Here are three examples:

1. Specify the element fillet of the background color:

Round corners!

2. Specify the element fillet of the border:

Round corners!

3. Specify the element fillet of the background picture:

Round corners!

The code is as follows:

Example

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

8.5.4. CSS3 border-radius-specify each fillet ¶

If you’re here, border-radius property, then four fillets will be generated.

However, if you want to specify each of the 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, and the third value is the lower right corner

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

• One value: four fillets have the same value

Here are three examples:

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

2. Three values-border-radius: 15px 50px 30px:

3. Two values-border-radius: 15px 50px:

The following is the source code:

Example

#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 elliptical corners:

Example

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

8.5.5. CSS3 fillet attribute ¶