border-radius

  • Revision slug: CSS/border-radius
  • Revision title: border-radius
  • Revision id: 36283
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 2 words added, 1 words removed

Revision Content

{{ CSSRef() }}

Summary

The border-radius CSS property can be used to give borders rounded corners. The radius applies also to the background even if the element has no border.

border-radius is a shortcut to set the four properties {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} and {{ Cssxref("border-bottom-left-radius") }}.

Inherited values are not possible yet (for example border-radius:0 0 inherit inherit) which does not allow overriding existing definitions partially.
  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements, except the table element when border-collapse is collapse
  • {{ Xref_cssinherited() }}: no
  • Percentages: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

border-radius:   <border-radius>{1,4} [ / <border-radius>{1,4}]?

Values

Accepts one, two, three or four <border-radius> values, optional followed by a slash / and a second set of values. <border-radius> represents one of:

<length>
See {{ Xref_csslength() }} for possible units.
<percentage>
Percentages for the horizontal radius are relative to the width of the border box, whereas percentages for the vertical radius are relative to the height of the border box.

If one value is set, this radius applies to all 4 corners.

If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.

Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.

For three values, the second value applies to top-right and also bottom-left.

If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius.  If the slash is omitted, then the same values are used to set both horizontal and vertical radii.

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;

Examples

 border: solid 10px;
 
 /* the border will curve into a 'D' */
 border-radius: 0 50px 50px 0;
 border: groove 1em red;
 border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
   background: gold;
   border-radius: 40px 10px; 
background: black;
color: gray;
border-radius: 50%;

Notes

  • Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.
  • border-radius does not apply to table elements when {{ Cssxref("border-collapse") }} is collapse.
  • Old versions of WebKit handle multiple values differently, see below.

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("2.0") }}
{{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}
4.0
0.2{{ property_prefix("-webkit") }}
9.0 10.5 5.0
3.0{{ property_prefix("-webkit") }}
Elliptical borders {{ CompatGeckoDesktop("1.9.1") }} yes yes yes yes, but see below
4 values for 4 corners yes 4.0 yes yes 5.0
Percentages yes
was {{ non-standard_inline() }} (see below)
yes yes 11.5 5.1
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support 3.2{{ property_prefix("-webkit") }} {{ CompatNo() }} {{ CompatNo() }} 2.1{{ property_prefix("-webkit") }}
Elliptical borders {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatUnknown() }}
4 values for 4 corners {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatUnknown() }}
Percentages {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatUnknown() }}

<percentage> values

  • are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010)
  • are buggy in Opera prior to 11.50
  • are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). Both horizontal and vertical radii were relative to the width of the border box.
  • are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)

Gecko notes

In Gecko 2.0 -moz-border-radius is renamed to border-radius. -moz-border-radius is supported as an alias for a transitional period (at least until the next version of Gecko). In order to conform to the CSS3 standard, Gecko 2.0

  • changes the handling of {{ xref_csspercentage() }} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
  • makes rounded corners clip content and images (if {{ cssxref("overflow") }}: visible is not set)
Note: Support for the non-prefixed version (-moz-border-radius) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.

WebKit notes

Older Safari and Chrome versions (prior to WebKit 532.5)

  • support only one value for all 4 corners. For different radii the long form properties must be used
  • don't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners
    /* this is equivalent: */
    
    -webkit-border-radius: 40px 10px;
            border-radius: 40px/10px;
    

Opera notes

In Opera (prior to Opera 11.60), applying border-radius to replaced elements will not have rounded corners.

See also

  • Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}

{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>border-radius</code> CSS property can be used to give borders rounded corners. The radius applies also to the <code>background</code> even if the element has no border.</p>
<p><code>border-radius</code> is a shortcut to set the four properties {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} and {{ Cssxref("border-bottom-left-radius") }}.</p>
<div class="note">Inherited values are not possible yet (for example <code>border-radius:0 0 inherit inherit</code>) which does not allow overriding existing definitions partially.</div>
<ul class="cssprop"> <li>{{ Xref_cssinitial() }}: <code>0</code></li> <li>Applies to: all elements, except the <code>table</code> element when <code>border-collapse</code> is <code>collapse</code></li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h2>Syntax</h2>
<pre class="syntaxbox">border-radius:   &lt;border-radius&gt;{1,4} [ / &lt;border-radius&gt;{1,4}]?</pre>
<h3>Values</h3>
<p>Accepts one, two, three or four <code>&lt;border-radius&gt; </code> values, optional followed by a slash <code>/</code> and a second set of values. <code>&lt;border-radius&gt;</code> represents one of:</p>
<dl> <dt><code>&lt;length&gt;</code></dt> <dd>See {{ Xref_csslength() }} for possible units.</dd> <dt><code>&lt;percentage&gt;</code></dt> <dd>Percentages for the horizontal radius are relative to the width of the border box, whereas percentages for the vertical radius are relative to the height of the border box.</dd>
</dl>
<p>If<strong> one </strong>value is set, this radius applies to<strong> all 4 corners</strong>.</p>
<p>If<strong> two </strong>values are set, the<strong> first </strong>applies to <code>top-left </code>and <code>bottom-right </code>corner, the <strong>second</strong> applies to <code>top-right </code>and <code>bottom-left </code>corner.</p>
<p><strong>Four</strong> values apply to the <code>top-left</code>, <code>top-right</code>, <code>bottom-right</code>, <code>bottom-left</code> corner in that order.</p>
<p>For <span style="font-weight: bold;">t</span><strong>hree</strong> values, the second value applies to <code>top-right</code> and also <code>bottom-left</code>.</p>
<p>If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius.  If the slash is omitted, then the same values are used to set both horizontal and vertical radii.</p>
<p>For example:</p>
<pre class="brush: css">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;
</pre>
<pre class="brush: css">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;
</pre>
<h2>Examples</h2>
<pre style="float:left; margin:10px; border:solid 10px; border-radius:0 50px 50px 0;"> border: solid 10px;
 
 /* the border will curve into a 'D' */
 border-radius: 0 50px 50px 0;
</pre>
<pre style="float:left; margin:10px; border: groove 1em red; border-radius:2em;"> border: groove 1em red;
 border-radius: 2em;
</pre>
<pre style="float:left; margin:10px; background:gold; border:ridge gold; border-radius:13em/3em;">  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
</pre>
<pre style="float:left; border:none; margin:10px; background:gold; border-radius: 40px 10px;">   background: gold;
   border-radius: 40px 10px; 
</pre>
<pre style="float:left; border:none; margin:10px; background:black; color:gray; border-radius:50%">background: black;
color: gray;
border-radius: 50%;
</pre>
<h2 style="clear:both">Notes</h2>
<ul> <li>Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.</li> <li><code>border-radius</code> does not apply to table elements when {{ Cssxref("border-collapse") }} is <code>collapse</code>.</li> <li>Old versions of WebKit handle multiple values differently, see below.</li>
</ul>
<h2>Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-radius" title="http://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Module Level 3</a></td> <td>{{ Spec2('CSS3 Backgrounds') }}</td> <td> </td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoDesktop("2.0") }}<br> {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td> <td>4.0<br> 0.2{{ property_prefix("-webkit") }}</td> <td>9.0</td> <td>10.5</td> <td>5.0<br> 3.0{{ property_prefix("-webkit") }}</td> </tr> <tr> <td>Elliptical borders</td> <td>{{ CompatGeckoDesktop("1.9.1") }}</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes, but see below</td> </tr> <tr> <td>4 values for 4 corners</td> <td>yes</td> <td>4.0</td> <td>yes</td> <td>yes</td> <td>5.0</td> </tr> <tr> <td>Percentages</td> <td>yes<br> was {{ non-standard_inline() }} (see below)</td> <td>yes</td> <td>yes</td> <td>11.5</td> <td>5.1</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>iOS Safari</th> <th>Opera Mini</th> <th>Opera Mobile</th> <th>Android Browser</th> </tr> <tr> <td>Basic support</td> <td>3.2{{ property_prefix("-webkit") }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>2.1{{ property_prefix("-webkit") }}</td> </tr> <tr> <td>Elliptical borders</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>4 values for 4 corners</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>Percentages</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3><code>&lt;percentage&gt;</code> values</h3>
<ul> <li>are not supported in older Chrome and Safari versions (it was <a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>)</li> <li>are buggy in Opera prior to 11.50</li> <li>are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). <strong>Both</strong> horizontal and vertical radii were relative to the width of the border box.</li> <li>are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)</li>
</ul>
<h3>Gecko notes</h3>
<p>In Gecko 2.0 <code>-moz-border-radius</code> is renamed to <code>border-radius</code>. <code>-moz-border-radius</code> is supported as an alias for a transitional period (at least until the next version of Gecko). In order to conform to the CSS3 standard, Gecko 2.0</p>
<ul> <li>changes the handling of {{ xref_csspercentage() }} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code></li> <li>makes rounded corners clip content and images (if {{ cssxref("overflow") }}<code>: visible</code> is not set)</li>
</ul>
<div class="note"><strong>Note:</strong> Support for the non-prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.</div><h3>WebKit notes</h3>
<p>Older Safari and Chrome versions (prior to WebKit 532.5)</p>
<ul> <li>support only <strong>one</strong> value for all 4 corners. For different radii the <a href="/en/CSS/border-top-left-radius#Examples" title="en/CSS/border-top-left-radius#Examples">long form properties</a> must be used</li> <li>don't support the slash <code>/</code> notation. If two values are specified, an elliptical border is drawn on all 4 corners <pre>/* this is equivalent: */

-webkit-border-radius: 40px 10px;
        border-radius: 40px/10px;
</pre> </li>
</ul>
<h3>Opera notes</h3>
<p>In Opera (prior to Opera 11.60), applying <code>border-radius</code> to replaced elements will not have rounded corners.</p><h2>See also</h2>
<ul> <li>Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</li>
</ul>
<p>{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}</p>
Revert to this revision