Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 39728 of border-top-left-radius

  • Revision slug: CSS/border-top-left-radius
  • Revision title: border-top-left-radius
  • Revision id: 39728
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

{{ CSSRef() }}

Summary

The border-top-left-radius CSS property sets the rounding of the top-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

border-radius.png

  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements
  • {{ Xref_cssinherited() }}:no
  • {{ xref_csspercentage() }}:yes, refer to the corresponding size of the border box
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the dimension of the semi-major and semi-minor axis, that is two absolute {{ xref_csslength() }} values
  • Animatable: yes

Syntax

Formal grammar: [ <length> | <percentage> ] [ <length> | <percentage> ]? 
border-top-left-radius: radius               /* the corner is a circle    */  E.g. border-top-left-radius: 3px
border-top-left-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-top-left-radius: 0.5em 1em

border-top-left-radius: inherit

where:

radius
Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} denoting the radius of the circle to use for the border in that corner.
horizontal
Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner.
vertical
Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} denoting the vertical semi-major axis of the ellipsis to use for the border in that corner.

Values

<length>

See {{ Xref_csslength() }} for possible units.
<percentage>
Since Gecko 2.0 (Firefox 4.0): Percentages for the horizontal radius refer to the width of the box, whereas percentages for the vertical radius refer to the height of the box.
In previous Gecko/Firefox versions {{ non-standard_inline() }}: Relative to the width of the box (the percentage is relative to the width even when specifying the radius for a height).

Examples

div { -moz-border-radius-topleft:  20px;  /* Firefox up to version 3.6 */
   -webkit-border-top-left-radius: 20px;  /* Safari, Chrome (before WebKit version 533) */
           border-top-left-radius: 20px;  /* Firefox 4; browsers with CSS3 support */
}
/* elliptical corners supported since Firefox 3.5 (Gecko 1.9.1) */
  
div { -moz-border-radius-topleft:   20px;       /* round corner, fallback for Firefox 1-3.0 */
      -moz-border-radius-topleft:   20px 10px;  /* elliptical border, Firefox 3.5-3.6 */
    -webkit-border-top-left-radius: 20px 10px;  /* Safari, Chrome (before WebKit version 532.5) */
            border-top-left-radius: 20px 10px;  /* Firefox 4; browsers with CSS3 support */
}

Browser compatibility

{{ CompatibilityTable() }}


Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 0.2 {{ property_prefix("-webkit") }}

1.0 (1.0) {{ property_prefix("-moz") }}
but with a non-standard name :
-moz-border-radius-topleft

9.0 10.5 3.0 (522){{ property_prefix("-webkit") }}
4.0 4.0 (2.0) 5.0 (532.5)
Percentages 4.0 1.0 (1.0) with a bug 9.0 10.5 5.0 (532.5)
4.0 (2.0)
Elliptical corners 0.2 3.5 (1.9.1) 9.0 10.5 3.0 (522 )
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specifications

CSS 3 Backgrounds and Borders #border-radius

See also

{{ cssxref("border-radius") }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>border-top-left-radius</code> CSS property sets the rounding of the top-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square.</p>
<p><img alt="border-radius.png" class="internal default" src="/@api/deki/files/6132/=border-radius.png" style=""></p>
<ul class="cssprop" style="display:table;padding: 0.4em;border-left:0.15em solid;background-color:#eeeeff"> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ Xref_cssinitial() }}:</dfn> <code>0</code></li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Applies to:</dfn> all elements</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ Xref_cssinherited() }}:</dfn>no</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ xref_csspercentage() }}:</dfn>yes, refer to the corresponding size of the border box</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Media:</dfn> {{ Xref_cssvisual() }}</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ Xref_csscomputed() }}:</dfn> the dimension of the semi-major and semi-minor axis, that is two absolute {{ xref_csslength() }} values</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Animatable:</dfn> yes</li>
</ul>
<h2>Syntax</h2>
<pre class="eval syntaxbox" style="border:1px solid #cccccc;border-bottom: none; margin-bottom:0;background-color:#ffe;border-top-right-radius:1em;border-top-left-radius:1em;">Formal grammar: [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ] [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ]? </pre>
<pre style="border:1px solid #cccccc;border-bottom-right-radius:1em;border-bottom-left-radius:1em;border-top:none;margin-top:0;">border-top-left-radius: <em>radius</em>               /* the corner is a circle    */  E.g. border-top-left-radius: 3px
border-top-left-radius: <em>horizontal</em> <em>vertical</em>  /* the corner is an ellipsis */  E.g. border-top-left-radius: 0.5em 1em

border-top-left-radius: inherit
</pre>
<div style="font-size: 0.9em;"> <p style="float:left; margin:0:">where:</p> <dl style="padding-left:6em;"> <dt style="float:left;width:7.5em"><em>radius</em></dt> <dd style="padding-left:7.5em">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} denoting the radius of the circle to use for the border in that corner.</dd> <dt style="float:left;width:7.5em"><em>horizontal</em></dt> <dd style="padding-left:7.5em">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner.</dd> <dt style="float:left;width:7.5em"><em>vertical</em></dt> <dd style="padding-left:7.5em">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} denoting the vertical semi-major axis of the ellipsis to use for the border in that corner.</dd> </dl>
</div>
<h3>Values</h3>
<p>&lt;length&gt;</p>
<dl> <dd>See {{ Xref_csslength() }} for possible units.</dd> <dt>&lt;percentage&gt;</dt> <dd><strong>Since Gecko 2.0 (Firefox 4.0):</strong> Percentages for the horizontal radius refer to the width of the box, whereas percentages for the vertical radius refer to the height of the box.<br> <strong>In previous Gecko/Firefox versions {{ non-standard_inline() }}:</strong> Relative to the width of the box (the percentage is relative to the width even when specifying the radius for a height).</dd>
</dl>
<h2>Examples</h2>
<pre>div { -moz-border-radius-topleft:  20px;  /* Firefox up to version 3.6 */
   -webkit-border-top-left-radius: 20px;  /* Safari, Chrome (before WebKit version 533) */
           border-top-left-radius: 20px;  /* Firefox 4; browsers with CSS3 support */
}
</pre>
<pre>/* elliptical corners supported since Firefox 3.5 (Gecko 1.9.1) */
  
div { -moz-border-radius-topleft:   20px;       /* round corner, fallback for Firefox 1-3.0 */
      -moz-border-radius-topleft:   20px 10px;  /* elliptical border, Firefox 3.5-3.6 */
    -webkit-border-top-left-radius: 20px 10px;  /* Safari, Chrome (before WebKit version 532.5) */
            border-top-left-radius: 20px 10px;  /* Firefox 4; browsers with CSS3 support */
}</pre>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"><br> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td rowspan="2">Basic support</td> <td>0.2 {{ property_prefix("-webkit") }}</td> <td> <p>1.0 (1.0) {{ property_prefix("-moz") }}<br> but with a non-standard name :<br> <code>-moz-border-radius-topleft</code></p> </td> <td rowspan="2">9.0</td> <td rowspan="2">10.5</td> <td>3.0 (522){{ property_prefix("-webkit") }}</td> </tr> <tr> <td>4.0</td> <td>4.0 (2.0)</td> <td>5.0 (532.5)</td> </tr> <tr> <td rowspan="2">Percentages</td> <td rowspan="2">4.0</td> <td>1.0 (1.0) with a bug</td> <td rowspan="2">9.0</td> <td rowspan="2">10.5</td> <td rowspan="2">5.0 (532.5)</td> </tr> <tr> <td>4.0 (2.0)</td> </tr> <tr> <td>Elliptical corners</td> <td>0.2</td> <td>3.5 (1.9.1)</td> <td>9.0</td> <td>10.5</td> <td>3.0 (522 )</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>Specifications</h2>
<p><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></p>
<h3>See also</h3>
<p>{{ cssxref("border-radius") }}</p>
<p>{{ languages( { "de": "de/CSS/border-top-left-radius", "fr": "fr/CSS/border-top-left-radius", "ja": "ja/CSS/border-top-left-radius", "pl": "pl/CSS/-moz-border-radius-topleft" } ) }}</p>
Revert to this revision