Contents
Understanding CSS border-radius
By using the CSS border-radius property, you can define rounded corners for an element:
It is actually a shorthand for four CSS border radius subproperties:
border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius
Each of these subproperties could be used to style each corner individually:
If you add rounded corners for an element that has a background color or a background image, it will be rounded with the border as well and not leak over its lines:
#roundcorners {
border-radius: 30px;
background: url(sheet.gif);
background-position: center top;
background-repeat: repeat;
padding: 25px;
width: 250px;
height: 200px;
}Syntax for CSS border-radius
The syntax for border-radius is simple:
border-radius: value1 value2 value3 value4;
The values can be defined in either length units or percentages. You can specify one, two, three, or four of them:
| Syntax | Example | Explanation |
|---|---|---|
| One value | border-radius: 3px; | All four corners are modified in the same manner. |
| Two values | border-radius: 3px 6px; | The first value is used to modify the top left and the bottom right corners. The second value is used to modify the top right and the bottom left corners. |
| Three values | border-radius: 3px 6px 9px; | The first value is used to modify the top left corner. The second value is used to modify the top right and the bottom left corners. The third value is used to modify the bottom right corner. |
| Four values | border-radius: 3px 6px 9px 12px; | The first value is used to modify the top left corner. The second value is used to modify the top right corner. The third value is used to modify the bottom right corner. The fourth value is used to modify the bottom left corner. |
Ellipse corners with border-radius
In some cases, you might not need the corners to be perfectly round. To create elliptical rounding, define two values for the CSS border-radius property and put a slash (/) between them. The first value will specify the horizontal radius for the corner, and the second one will define the vertical radius:
#example1 {
border: 5px solid green;
padding: 10px;
border-radius: 3em;
}
#example2 {
border: 5px solid red;
padding: 10px;
border-radius: 3em/6em;
}