The border-radius
CSS property allows Web authors to define how rounded border corners are. You can specify a single radius to make circular corners, or two radii, to make elliptical corners.
/* 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 5% / 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; border-radius: inherit;
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.
This property is a shorthand to set the four properties border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
and border-bottom-left-radius
.
The border-radius
property does not apply to table elements when border-collapse
is collapse
.
border-radius:0 0 inherit inherit
, which would override existing definitions partially. In that case, the individual longhand properties have to be used.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 |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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. | |
inherit | Is a keyword indicating that all four values are inherited from their parent's element calculated value. |
<length>
<length>
data types. Negative values are invalid.<percentage>
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;
<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?where
<length-percentage> = <length> | <percentage>
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;
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/
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-radius' in that specification. | Candidate Recommendation | Initial definition |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support |
41 1 -webkit- |
Yes Yes -webkit- |
1 — 12 -moz- |
9 | 10.54 |
51 3 -webkit- |
Elliptical borders | Yes5 | Yes | 3.5 | Yes | Yes | Yes6 |
4 values for 4 corners | 4 | Yes | Yes | Yes | Yes | 5 |
Percentages | Yes7 | Yes | 48 | Yes | 11.59 | 5.17 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 2.1 -webkit- | ? |
Yes Yes -webkit- |
Yes2 | |||
Elliptical borders | ? | ? | Yes | Yes | ? | No | ? |
4 values for 4 corners | ? | ? | Yes | Yes | ? | No | ? |
Percentages | Yes7 | ? | Yes | Yes | ? | No | Yes7 |
1. Current Chrome and Safari versions ignore border-radius on <select>
elements unless -webkit-appearance
is overridden to an appropriate value.
2. Prior to 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.
3. 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.
4. In Opera prior to version 11.60, replaced elements with border-radius
will not have rounded corners.
5. Prior to Chrome 4, the slash /
notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px;
is equivalent to border-radius: 40px/10px;
.
6. Prior to Safari 4.1, the slash /
notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px;
is equivalent to border-radius: 40px/10px;
.
7. <percentage>
values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
8. <percentage>
values are implemented in a non-standard way prior to Firefox 4. Both horizontal and vertical radii were relative to the width of the border box.
9. The implementation of <percentage>
values was buggy in Opera prior to 11.50.
border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
, border-bottom-left-radius
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius