CSS3 border-radius Property
Example
Add rounded borders to two div elements:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px 20px;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -ms-, or -moz- specify the first version that worked with a prefix.
| Property | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border-radius | 4.0 -webkit- | 9.0 | 4.0 -moz- | 5.0 -webkit- | 10.5 -o- |
Property Definition and Usage
The border-radius property allows you to add rounded corners to elements. When using one radius, it creates a circle; when using two radii, it creates an ellipse. The intersection of the ellipse with the border forms the rounded corners.
The border-radius property is a shorthand for the four border-*-radius properties.
Tip: This property allows you to add rounded borders to elements!
| Default value: | 0 |
|---|---|
| Inherited: | no |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.borderRadius="5px" |
| --- | --- |
Syntax
Note: The order of the four values for each radius is: top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left.
| Value | Description |
|---|---|
| length | Defines the shape of the curve. |
| % | Defines the shape of the corner in %. |
border-radius: 1em/5em;
/* Equivalent to: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px;
/* Equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
Elliptical border - border-radius: 15px 50px 30px 5px: The first value applies to the top-left corner, the second value applies to the top-right corner, the third value applies to the bottom-right corner, and the fourth value applies to the bottom-left corner.
Elliptical border - border-radius: 15px 50px 30px: The first value applies to the top-left corner, the second value applies to the top-right and bottom-left corners, and the third value applies to the bottom-right corner.
Elliptical border - border-radius: 15px 50px: The first value applies to the top-left and bottom-right corners, and the second value applies to the top-right and bottom-left corners.
Elliptical border - border-radius: 15px: This value applies to all four corners, equally rounded.
More Examples
Example
Background image with border:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Example
Different type parameters:
#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;
}
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
Example
Different number of parameters:
#rcorners4 {
border-radius: 15px 50px 30px 5px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners7 {
border-radius: 15px;
padding: 20px;
width: 200px;
height: 150px;
}
Example
Shorthand format:
#example1 {
border-radius: 2em / 5em;
}
/* Equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* Equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
Related Articles
CSS3 Tutorial: CSS3 Borders