CSS3 Rounded Corners
Browser support
The numbers in the table represent the version number of the first browser to support the property.
The number preceding -webkit- or -moz- indicates the first version that supports that prefix.
Property | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
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
Using the CSS3 border-radius property, you can make "rounded corners" for any element.
Here are three examples:
1. Element rounded corners with a specified background color:
Rounded corners!
2. Specify the element rounded corners of the border:
Rounded corners!
3. Specify the element rounded corners of the background image:
Rounded corners!
The codes show as below:
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; }
CSS3 border-radius - specifies each rounded corner
If you specify only one value in the border-radius property, then 4 rounded corners 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 the lower right corner, the second value is the upper right corner and the lower left corner
One value: The four rounded corners 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; }
CSS3 rounded corner property
Property | Description |
---|---|
border-radius | Short for all four corner border-*-*-radius properties |
border-top-left-radius | Defines the upper left corner in radians |
border-top-right-radius | Defines the radians of the upper right corner |
border-bottom-right-radius | Defines the radian of the lower right corner |
border-bottom-left-radius | Defines the radian of the lower left corner |