This article is Ready to Use.
W3C Candidate Recommendation
The border-radius CSS property allows authors to round the corners of an element. The rounding can be different per-corner, and it could have different horizontal and vertical radii, to produce elliptical curves.
|Initial value|| |
|Applies to||All elements, except the table element when border-collapse is collapse|
|Computed value||As specified by individual properties|
|CSS Object Model Property|| |
|Percentages||Refer to the corresponding dimension (width or height) of the border box.|
- Denotes the size of the circle radius or the horizontal and vertical radii, for elliptical curves. It can be expressed in any unit allowed in CSS <length> data types. em units are useful for controls that scale proportionally with the font-size. Viewport-relative units (vw, vh, vmin, vmax) can be useful for controls that scale with the viewport size. Negative values are invalid. You can specify a single length for all four corners, or two, three or four lengths to specify different lengths for different corners: see the syntax section for more details.
- Denotes the size of the corner radius, in percentages of the box’s border-box dimensions. Specifically, percentages for the horizontal axis refer to the width of the border-box, percentages for the vertical axis refer to the height of the border-box. Negative values are invalid. You can specify a single percentage for all four corners, or two, three or four percentages to specify different percentages for different corners: see the syntax section for more details.
- length / length
- Specifying two sets of length values separated by a forward slash equates to specifying separate lengths for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have different lengths. Each set can consist of one, two, three or four values.
- percentage / percentage
- Specifying two sets of percentage values separated by a forward slash equates to specifying separate percentages for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have percentages resulting in different computed values (depending on the width and height of the element, different percentages might result in the same computed values; see the remarks section for more). Each set can consist of one, two, three or four values.
One value example
border-radius: 1em; /* is equivalent to: */ border-top-left-radius: 1em; border-top-right-radius: 1em; border-bottom-right-radius: 1em; border-bottom-left-radius: 1em;
Multi value example
border-radius: 20px 1em 1vw / 0.5em 3em; /* is equivalent to: */ border-top-left-radius: 20px 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 1vw 0.5em; border-bottom-left-radius: 1em 3em;
Create an ellipse, unless the
border-radius: 50%; /* Will be a circle if the element’s width is equal to its height */
Shrinking curves to avoid overlapping
border-radius: 100% 150%; /* is equivalent to: */ border-radius: 40% 60%; /* The values shrink proportionally, all multiplied by the same factor, until there is no overlap */
As with any shorthand property, individual inherited values are not possible, that is
border-radius:0 0 inherit inherit, which would override existing definitions partially. In that case, the individual longhand properties have to be used.
border-radius can take between one and four values:
- one value will be applied to all four corners
- two values will be applied to top-left + bottom-right, and top-right + bottom-left, respectively
- three values will be applied to top-left, top-right + bottom-left, and bottom-right, respectively
- four values will be applied to the four corners separately, in the order of top-left, top-right, bottom-right, bottom-left
- The border-radius property is a composite property that specifies up to four border-*-radius properties. If values are given before and after the slash, the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash ("/"), the values set both radii equally. The four values for each radii are given in clockwise order, starting from the top left corner. If less than four values are provided, they are repeated until we get four values, similarly to other CSS properties, such as border-width.
- It’s possible to end up with elliptical corners, even by specifying one radius. This occurs when you are using percentages, since they resolve to a different number for each axis (horizontally they are percentages of the border box width, vertically of the height). For a demonstration, refer to the ellipse example above (example #3)
- Since border-radius rounds the border box of the element, the inner (padding box) corners will have smaller radii (specifically border-radius - border-width), or even no rounding, if the border is thicker than the border-radius value. Another consequence of this is that when there are different border widths on adjacent sides, the curves of the padding box will be elliptical.
- Note that although in the border-radius shorthand, there is a slash (/) to separate horizontal from vertical radii, they are space separated in the longhands.
|CSS Backgrounds and Borders Module Level 3: Rounded Corners:||Candidate Recommendation|
|CSS Backgrounds and Borders Module Level 4: Rounded Corners:||Editor’s Draft||Added border-corner-shape to let border-radius specify the size of a number of different corner shapes besides rounded corners.|