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 source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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: 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 | [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3639/b42295f89e9a954ef185b95e1ffebc9e/all-corner.png|class=default internal|all-corner.png]] | 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 | [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3642/20ed80936d423553bf797c61413a2932/top-left-bottom-right.png|class=default internal|top-left-bottom-right.png]] | 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 | [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3644/adbf90a1e222497616b2faacf6c7e7f5/top-right-bottom-left.png|class=default internal|top-right-bottom-left.png]] | 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 | [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3643/b9443d4aa8af00db73dc47c61c053b75/top-left.png|class=default internal|top-left.png]] | 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 | [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3645/7181fe52c3c7d2c2224669def908b3c2/top-right.png|class=default internal|top-right.png]] | 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 | [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3641/5567bf4331ba97df9e8e9d26226efc7f/bottom-rigth.png|class=default internal|bottom-rigth.png]] | 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 | [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3640/f3015564bfd7439f3020bbc47d0dd04d/bottom-left.png|class=default internal|bottom-left.png]] | 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.
|
- <span id="<length>">
<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.
- <span id="<percentage>">
<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
border: solid 10px; /* the border will curve into a 'D' */ border-radius: 10px 40px 40px 10px;
border: groove 1em red; border-radius: 2em;
background: gold; border: ridge gold; border-radius: 13em/3em;
border: none; border-radius: 40px 10px;
border: none; border-radius: 50%;
border: dotted; border-width: 10px 4px; border-radius: 10px 40px;
border: dashed; border-width: 2px 4px; border-radius: 40px;
Live Samples
- Sample 1 : http://jsfiddle.net/Tripad/qnGKj/2/
- Sample 2 : http://jsfiddle.net/Tripad/qnGKj/3/
- Sample 3 : http://jsfiddle.net/Tripad/qnGKj/4/
- Sample 4 : http://jsfiddle.net/Tripad/qnGKj/5/
- Sample 5 : http://jsfiddle.net/Tripad/qnGKj/6/
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3The definition of 'border-radius' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-radius
|
Chrome Full support 4 Full support 4 Notes' Chrome ignores Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 12 Full support 12 Full support 12 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 4 Full support 4 Notes' Prior to Firefox 50, border styles of rounded corners (with Prefixed' Implemented with the vendor prefix: -moz- |
IE
Full support 9 |
Opera Full support 10.5 Full support 10.5 Notes' Before Opera 11.60, replaced elements with |
Safari Full support 5 Full support 5 Notes' Safari ignores Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support ≤37 Full support ≤37 Full support 2 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android
Full support 18 |
Firefox Android Full support 4 Full support 4 Notes' Prior to Firefox 50, border styles of rounded corners (with Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android
Full support 11 |
Safari iOS Full support 4.2 Full support 4.2 Notes' Safari ignores Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android
Full support 1.0 |
Elliptical borders |
Chrome Full support 1 Full support 1 Notes' Before Chrome 4, the slash |
Edge
Full support 12 |
Firefox
Full support 4 |
IE
Full support 9 |
Opera
Full support 10.5 |
Safari Full support 3 Full support 3 Notes' Before Safari 5, the slash |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 11 |
Safari iOS
Full support 4.2 |
Samsung Internet Android
Full support 1.0 |
Percentages | Chrome
Full support 8 |
Edge
Full support 12 |
Firefox Full support 4 Full support 4 Notes' |
IE
Full support 9 |
Opera Full support 11.5 Full support 11.5 Notes' The implementation of |
Safari
Full support 5.1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 11.5 |
Safari iOS
Full support 6 |
Samsung Internet Android
Full support 1.0 |
4 values for 4 corners | Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 4 |
IE
Full support 9 |
Opera
Full support 10.5 |
Safari
Full support 5 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 11 |
Safari iOS
Full support 4.2 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- Border-radius-related CSS properties:
border-top-left-radius
,border-top-right-radius
,border-bottom-right-radius
,border-bottom-left-radius
border-radius by Mozilla Contributors is licensed under CC-BY-SA 2.5.