border-top-left-radius

  • Revision slug: CSS/border-top-left-radius
  • Revision title: border-top-left-radius
  • Revision id: 39731
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 74 words added, 67 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

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>
<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>
<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