border-radius

  • Revision slug: CSS/border-radius
  • Revision title: border-radius
  • Revision id: 36261
  • Created:
  • Creator: myakura
  • Is current revision? No
  • Comment 38 words added, 20 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") }}.

  • {{ 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() }}

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.
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; see {{ bug("382721") }}.
  • border-radius does not apply to table elements when {{ Cssxref("border-collapse") }} is collapse.
  • Older Safari/WebKit handles multiple values different, see below.

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 {{ CompatNo() }}
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 (the bug 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.

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;
       -moz-border-radius:  40px/10px;
            border-radius:  40px/10px;

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 standard, changes had been made to -moz-border-radius over time.

  • (Changed in Gecko {{ CompatGeckoDesktop("2.0") }}) The handling of {{ Xref_csspercentage() }} values changed to match the latest specification. E.g. you can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
  • (Changed in Gecko {{ CompatGeckoDesktop("2.0") }}) Rounded corners clip content and images (if {{ Cssxref("overflow") }}: visible  is not set).
  • (Changed in Gecko {{ CompatGeckoDesktop("1.9.1") }}) -moz-border-radius updated to match the latest revision to the CSS3 specification for the border radius properties. Thus elliptical borders are now supported.

Specifications

See also

{{ 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>
<ul> <li>{{ Xref_cssinitial() }}: 0</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() }}</li>
</ul><h2>Syntax</h2>
<pre>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>&lt;length&gt;</dt> <dd>See {{ Xref_csslength() }} for possible units.</dd> <dt>&lt;percentage&gt;</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>.<br>
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.<br>
<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.<br>
<strong>Three</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; 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>Older Safari/WebKit handles multiple values different, see below.</li>
</ul>
<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) <p> </p> </td> <td>yes</td> <td>yes</td> <td>11.5</td> <td>{{ CompatNo() }}</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 (the bug 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>
</ul>
<h3>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 class="internal" 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 class="brush: css">/* this is equivalent: */

-webkit-border-radius:  40px 10px;
   -moz-border-radius:  40px/10px;
        border-radius:  40px/10px;</pre> </li>
</ul>
<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).</p>
<p>In order to conform to the standard, changes had been made to <code>-moz-border-radius</code> over time.</p>
<ul> <li>(Changed in Gecko {{ CompatGeckoDesktop("2.0") }}) The handling of {{ Xref_csspercentage() }} values changed to match the latest specification. E.g. you can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code></li> <li>(Changed in Gecko {{ CompatGeckoDesktop("2.0") }}) Rounded corners clip content and images (if {{ Cssxref("overflow") }}<code>: visible</code>  is not set).</li> <li>(Changed in Gecko {{ CompatGeckoDesktop("1.9.1") }}) <code>-moz-border-radius</code> updated to match the latest revision to the CSS3 specification for the border radius properties. Thus elliptical borders are now supported.</li>
</ul><h2>Specifications</h2>
<ul> <li><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 3 Backgrounds and Borders #border-radius</a></li>
</ul>
<h2>See also</h2>
<p>{{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</p>
<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