border-top-left-radius

  • Revision slug: CSS/border-top-left-radius
  • Revision title: border-top-left-radius
  • Revision id: 39737
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 18 words added, 22 words removed

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>
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{ xref_csslength() }} data types.
<percentage>
Denotes the size of the circla radius or the semi-major and semi-minor axes of the ellipsis using percentages values. The percentage for the horizontal axe refer to the width of the box, whereas percentages for the vertial axe refer to the height of the box.

Examples

.
An arc of circle is used as the border
div {
  border-top-left-radius: 40px 40px;
}
.
An arc of ellipse is used as the border
div {   
  border-top-left-radius: 40px 20px;
}
div {   
  border-top-left-radius: 10%;  /* An arc of ellipse or of a circle is used as the border,*/
                                /* depending of the shape of the div */
}
.
.

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 (see note) 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() }}

Browser notes

Gecko

  • The prefixed version (allowed from Firefox 1 to Firefox 13) of this property uses a different name, -moz-border-radius-topleft, than the final property as Mozilla implemented it before the final name was coined.
  • Until Firefox 3.6 included, the {{ xref_csspercentage() }} was relative to the width of the box even when specifying the radius for a height). This implied that -moz-border-radius-topleft was always drawing an arc of circle, and never an ellipse, when followed by a single value.

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>
<div style="text-align:center"><img alt="border-radius.png" class="internal default" src="/@api/deki/files/6132/=border-radius.png"></div>
<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>
<dl> <dt>&lt;length&gt;</dt> <dd>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{ xref_csslength() }} data types.</dd> <dt>&lt;percentage&gt;</dt> <dd>Denotes the size of the circla radius or the semi-major and semi-minor axes of the ellipsis using percentages values. The percentage for the horizontal axe refer to the width of the box, whereas percentages for the vertial axe refer to the height of the box.</dd>
</dl><h2>Examples</h2>
<table> <tbody> <tr> <td> <div style="background-color:lightgreen;border:solid 1px black;border-top-left-radius:40px 40px;width:100px;height:100px"> <div style="display:none;">.</div> </div> </td> <td>An arc of circle is used as the border <pre>div {
  border-top-left-radius: 40px 40px;
}</pre> </td> </tr> <tr> <td> <div style="background-color:lightgreen;border:solid 1px black;border-top-left-radius:40px 20px;width:100px;height:100px"> <div style="display:none;">.</div> </div> </td> <td>An arc of ellipse is used as the border <pre>div {   
  border-top-left-radius: 40px 20px;
}
</pre> </td> </tr> </tbody>
</table>
<pre>div {   
  border-top-left-radius: 10%;  /* An arc of ellipse or of a circle is used as the border,*/
                                /* depending of the shape of the div */
}
</pre>
<div style="background-color:lightgreen;border:solid 1px black;border-top-left-radius:20%;width:100px;height:100px"> <div style="display:none;">.</div>
</div>
<div style="background-color:lightgreen;border:solid 1px black;border-top-left-radius:20%;width:250px;height:100px"> <div style="display:none;">.</div>
</div><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 (see note)</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>
<h3>Browser notes</h3>
<h4>Gecko</h4>
<ul> <li>The prefixed version (allowed from Firefox 1 to Firefox 13) of this property uses a different name, <code>-moz-border-radius-topleft</code>, than the final property as Mozilla implemented it before the final name was coined.</li> <li>Until Firefox 3.6 included, the {{ xref_csspercentage() }} was relative to the width of the box even when specifying the radius for a height). This implied that <code>-moz-border-radius-topleft</code> was always drawing an arc of circle, and never an ellipse, when followed by a single value.</li>
</ul><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