border-top-left-radius

  • Revision slug: CSS/border-top-left-radius
  • Revision title: border-top-left-radius
  • Revision id: 39713
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment update the french doc link to non-prefixed; 5 words added, 5 words removed

Revision Content

{{ CSSRef() }}

Summary

The border-top-left-radius CSS property sets the rounding of the top-left corner of the element.

Previous to Gecko 2.0 (Firefox 4.0) it was named -moz-border-radius-topleft. This is supported as an alias for a short transitional period.

See {{ cssxref("border-radius") }} for more information.

  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: two absolute {{ Xref_csslength() }}s

Syntax

-moz-border-radius-topleft:  <border-radius> <border-radius>?
border-top-left-radius:      <border-radius> <border-radius>? 

Values

Accepts one <border-radius> value.
{{ fx_minversion_inline("3") }} An optional second value for elliptical corners. The two values define the radii of a quarter ellipse that defines the shape of the corner. The first value is the horizontal radius. The optional second value is the vertical radius, if omitted it's equal to the first.
<border-radius> represents one of:

<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

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

1.0 (1.0)

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

9.0

 

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
10.5 border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
3.0 (522) -webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

4.0

 

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
4.0 (2.0) border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
5.0 (532.5) border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Percentages 4.0 1.0 (1.0) {{ non-standard_inline() }} 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>
<h3>Summary</h3>
<p>The<code> border-top-left-radius </code>CSS property sets the rounding of the top-left corner of the element.</p>
<p>Previous to Gecko 2.0 (Firefox 4.0) it was named<code> -moz-border-radius-topleft</code>. This is supported as an alias for a short transitional period.</p>
<p>See {{ cssxref("border-radius") }} for more information.</p>
<ul> <li>{{ Xref_cssinitial() }}:<code> 0 </code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: two absolute {{ Xref_csslength() }}s</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">-moz-border-radius-topleft:  &lt;border-radius&gt; &lt;border-radius&gt;?
border-top-left-radius:      &lt;border-radius&gt; &lt;border-radius&gt;? 
</pre>
<h3>Values</h3>
<p>Accepts one<code> &lt;border-radius&gt; </code>value.<br> {{ fx_minversion_inline("3") }} An optional second value for elliptical corners. The two values define the radii of a quarter ellipse that defines the shape of the corner. The first value is the horizontal radius. The optional second value is the vertical radius, if omitted it's equal to the first.<br> <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><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>
<h3>Examples</h3>
<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>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table" width="1804"> <tbody> <tr> <th width="160">Feature</th> <th colspan="2">Chrome</th> <th colspan="2">Firefox (Gecko)</th> <th colspan="2">Internet Explorer</th> <th colspan="2">Opera</th> <th colspan="2">Safari (WebKit)</th> </tr> <tr> <td rowspan="2">Basic support</td> <td width="40"> <p>0.2</p> </td> <td width="269"><code>-webkit-border-top-left-radius<br> -webkit-border-top-right-radius<br> -webkit-border-bottom-right-radius<br> -webkit-border-bottom-left-radius</code></td> <td width="168"> <p>1.0 (1.0)</p> </td> <td width="275"><code>-moz-border-radius-topleft<br> -moz-border-radius-topright<br> -moz-border-radius-bottomright<br> -moz-border-radius-bottomleft</code></td> <td rowspan="2" width="35"> <p>9.0</p> <p> </p> </td> <td rowspan="2" width="180"><code>border-top-left-radius<br> border-top-right-radius<br> border-bottom-right-radius<br> border-bottom-left-radius</code></td> <td rowspan="2" width="40">10.5</td> <td rowspan="2" width="181"><code>border-top-left-radius<br> border-top-right-radius<br> border-bottom-right-radius<br> border-bottom-left-radius</code></td> <td width="177">3.0 (522)</td> <td width="248"><code>-webkit-border-top-left-radius<br> -webkit-border-top-right-radius<br> -webkit-border-bottom-right-radius<br> -webkit-border-bottom-left-radius</code></td> </tr> <tr> <td> <p>4.0</p> <p> </p> </td> <td><code>border-top-left-radius<br> border-top-right-radius<br> border-bottom-right-radius<br> </code>border-bottom-left-radius</td> <td>4.0 (2.0)</td> <td><code>border-top-left-radius<br> border-top-right-radius<br> border-bottom-right-radius<br> border-bottom-left-radius</code></td> <td>5.0 (532.5)</td> <td><code>border-top-left-radius<br> border-top-right-radius<br> border-bottom-right-radius<br> border-bottom-left-radius</code></td> </tr> <tr> <td rowspan="2">Percentages</td> <td colspan="2" rowspan="2">4.0</td> <td colspan="2">1.0 (1.0) {{ non-standard_inline() }}</td> <td colspan="2" rowspan="2">9.0</td> <td colspan="2" rowspan="2">10.5</td> <td colspan="2" rowspan="2">5.0 (532.5)</td> </tr> <tr> <td colspan="2">4.0 (2.0)</td> </tr> <tr> <td rowspan="2">Elliptical corners</td> <td colspan="2" rowspan="2">0.2</td> <td colspan="2" rowspan="2">3.5 (1.9.1)</td> <td colspan="2" rowspan="2">9.0</td> <td colspan="2" rowspan="2">10.5</td> <td colspan="2">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>Specifications</h3>
<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