The border-radius
CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
The border-radius
CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
The radius applies to the whole background
, even if the element has no border; the exact position of the clipping is defined by the background-clip
property.
The border-radius
property does not apply to table elements when border-collapse
is collapse
.
Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit
, which would partially override existing definitions. Instead, the individual longhand properties have to be used.
This property is a shorthand for the following CSS properties:
/* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: revert; border-radius: revert-layer; border-radius: unset;
The border-radius
property is specified as:
<length>
or <percentage>
values. This is used to set a single radius for the corners.<length>
or <percentage>
values. This is used to set an additional radius, so you can have elliptical corners.radius | Is a <length> or a <percentage> denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax. | |
top-left-and-bottom-right | Is a <length> or a <percentage> denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax. | |
top-right-and-bottom-left | Is a <length> or a <percentage> denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes. | |
top-left | Is a <length> or a <percentage> denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes. | |
top-right | Is a <length> or a <percentage> denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax. | |
bottom-right | Is a <length> or a <percentage> denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes. | |
bottom-left | Is a <length> or a <percentage> denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax. |
<length>
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.
<percentage>
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.
For example:
border-radius: 1em/5em; /* It is 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; /* It is 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;
Initial value | as each of the properties of the shorthand: |
---|---|
Applies to | all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter . |
Inherited | no |
Percentages | refer to the corresponding dimension of the border box |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
border-radius =
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
<length-percentage> =
<length> |
<percentage>
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
4_values_for_4_corners |
4 | 12 | 4 | 9 | 10.5 | 5 | ≤37 | 18 | 4 | 11 | 4.2 | 1.0 |
border-radius |
4Chrome ignoresborder-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value. |
1212 |
4["Before Firefox 50, border styles of rounded corners (withborder-radius ) were always rendered as if border-style was solid . This has been fixed in Firefox 50.", "To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%; . Firefox 4 also makes rounded corners clip content and images if overflow : visible is not set."] |
9 | 10.5Before Opera 11.60, replaced elements withborder-radius do not have rounded corners. |
5Safari ignoresborder-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value. |
≤372 | 18 |
4Before Firefox 50, border styles of rounded corners (withborder-radius ) were always rendered as if border-style was solid . This has been fixed in Firefox 50. |
11 |
4.2Safari ignoresborder-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value. |
1.0 |
elliptical_borders |
1Before Chrome 4, the slash/ notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px / 10px; . |
12 | 4 | 9 | 10.5 | 3Before Safari 5, the slash/ notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px / 10px; . |
≤37 | 18 | 4 | 11 | 4.2 | 1.0 |
percentages |
8 | 12 | 4Before Firefox 4,<percentage> values are implemented in a non-standard way. Both horizontal and vertical radii were relative to the width of the border box. |
9 | 11.5Before Opera 11.5, the implementation of<percentage> values was buggy. |
5.1 | ≤37 | 18 | 4 | 11.5 | 5 | 1.0 |
border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
, border-bottom-left-radius
, border-start-start-radius
, border-start-end-radius
, border-end-start-radius
, border-end-end-radius
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius