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.
border-radius
Try it
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.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* 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:
- one, two, three, or four
<length>or<percentage>values. This is used to set a single radius for the corners. - followed optionally by "/" and one, two, three, or four
<length>or<percentage>values. This is used to set an additional radius, so you can have elliptical corners.
Values
| 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; /* ... 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; /* ... 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;
Formal definition
| 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:
|
Formal syntax
<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?where
<length-percentage> = <length> | <percentage>
Examples
Live Samples
- Sample 1 : https://jsfiddle.net/Tripad/qnGKj/2/
- Sample 2 : https://jsfiddle.net/Tripad/qnGKj/3/
- Sample 3 : https://jsfiddle.net/Tripad/qnGKj/4/
- Sample 4 : https://jsfiddle.net/Tripad/qnGKj/5/
- Sample 5 : https://jsfiddle.net/Tripad/qnGKj/6/
Specifications
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
border-radius |
4
Chrome ignores
border-radius on
<select> elements unless
-webkit-appearance is overridden to an appropriate value.
1
|
12
12
|
4
["Before Firefox 50, border styles of rounded corners (with
border-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."]
1-12
|
9
|
10.5
Before Opera 11.60, replaced elements with
border-radius do not have rounded corners.
|
5
Safari ignores
border-radius on
<select> elements unless
-webkit-appearance is overridden to an appropriate value.
3
|
≤37
2
|
18
|
4
Before Firefox 50, border styles of rounded corners (with
border-radius) were always rendered as if
border-style was
solid. This has been fixed in Firefox 50.
4-14
|
11
|
4.2
Safari ignores
border-radius on
<select> elements unless
-webkit-appearance is overridden to an appropriate value.
1
|
1.0
|
elliptical_borders |
1
Before 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
|
3
Before 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
|
4
Before 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.5
Before Opera 11.5, the implementation of
<percentage> values was buggy.
|
5.1
|
≤37
|
18
|
4
|
11.5
|
6
|
1.0
|
4_values_for_4_corners |
4
|
12
|
4
|
9
|
10.5
|
5
|
≤37
|
18
|
4
|
11
|
4.2
|
1.0
|
See also
- Border-radius-related CSS properties:
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–2021 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
