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;
<div class="grid"> <div class="col"> <div class="cell"> <div class="border"> <div class="corner top left"> <span class="label h">0px</span> <span class="label v">0px</span> </div> <div class="corner top right"> <span class="label h">0px</span> <span class="label v">0px</span> </div> <div class="corner bottom right"> <span class="label h">0px</span> <span class="label v">0px</span> </div> <div class="corner bottom left"> <span class="label h">0px</span> <span class="label v">0px</span> </div> </div> </div> <div class="cell note"> border-radius: <input type="text" value="10px 50% / 20px 2em 30px 5em"> <input type="checkbox" checked><em>(rulers)</em> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; } .grid { width: 100%; height: 100%; display: flex; background: #EEE; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { flex: 1 auto; margin: .5em .5em 0; padding: .5em; background-color: #FFF; white-space: nowrap; overflow: hidden; } .note { background: #fff3d4; padding: 1em; margin: 0 .5em .5em; font: .8em sans-serif; text-align: center; flex: none; } .note input[type=text] { width: 40%; box-sizing: border-box; } @media (max-width: 33em) { .row { flex-direction: column; } } .border { margin: 2em; height: 200px; box-sizing: border-box; border: 1px solid #000; position: relative; transition: 300ms border-radius; } .corner { position: absolute; transition: 300ms width, 300ms height, 500ms opacity; } /* Vertical line */ .corner:before{ content: ''; width: 1px; top: -8px; bottom: -8px; position: absolute; overflow: hidden; } /* Horizontal line */ .corner:after { content: ''; height: 1px; left: -8px; right: -8px; position: absolute; overflow: hidden; } .label { position:absolute; font: .7em Verdana, monospace; color: red; background: rgba(256,256,256,.75); } .corner.top { top: 0; } .corner.top:after { border-bottom:1px dashed red; bottom: 0; } .corner.top > .h { bottom: 0; transform: translateY(45%); } .corner.bottom > .h { top: 0; transform: translateY(-65%); } .corner.left > .h { left: calc(100% + 10px); } .corner.right > .h { right: calc(100% + 10px); } .corner.top > .v { top: calc(100% + 10px); } .corner.bottom > .v { bottom: calc(100% + 10px); } .corner.left > .v { right: 0; transform: translateX(75%); } .corner.right > .v { left: 0; transform: translateX(-75%); } .corner.left { left: 0; } .corner.left:before { border-right:1px dashed red; right: 0; } .corner.bottom { bottom: 0; } .corner.bottom:after { border-top:1px dashed red; top: 0; } .corner.right { right: 0; } .corner.right:before { border-left:1px dashed red; left: 0; }
(function () { function parseRadius(str) { var v = str.trim().split(/\s+/, 4); if (v[0] === '') { return [0,0,0,0]; } if (v.length === 1 ) { return v.concat([v[0], v[0], v[0]]); } if (v.length === 2 ) { return v.concat(v); } if (v.length === 3 ) { v.push(v[1]); } return v; } function checkRulers() { var chk = document.querySelector('.note input[type=checkbox]').checked; var rulers = document.querySelectorAll('.corner'); for (var i=0; i<4; i++) { rulers[i].style.opacity = chk ? 1 : 0; } } function updateValues() { var value = document.querySelector('.note input').value.trim(); if (value === '') { value = '0'; } var box = document.querySelector('.border'); box.style.borderRadius = value; var values = value.split('/').map(function (str) { return str.trim(); }); values[0] = parseRadius(values[0]); values[1] = (values[1] && parseRadius(values[1])) || values[0]; var corners = [ '.corner.top.left', '.corner.top.right', '.corner.bottom.right', '.corner.bottom.left' ] for (var c, i=0; i<4; i++) { c = document.querySelector(corners[i]) c.style.width = values[0][i]; c.style.height = values[1][i]; document.querySelector(corners[i] + ' .v').innerText = values[0][i]; document.querySelector(corners[i] + ' .h').innerText = values[1][i]; } } window.addEventListener('keyup', checkRulers); window.addEventListener('click', checkRulers); window.addEventListener('keyup', updateValues); window.addEventListener('load', updateValues); })();
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 |
Syntax
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 "/" followed by 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. |
inherit |
Is a keyword indicating that all four values are inherited from their parent's element calculated value. |
<length>
- Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. It can be expressed in any unit allowed by the CSS
<length>
data types. 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 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 3 The definition of 'border-radius' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
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.
See also
- Border-radius-related CSS properties:
border-top-left-radius
,border-top-right-radius
,border-bottom-right-radius
,border-bottom-left-radius