border-top-left-radius

  • Revision slug: CSS/border-top-left-radius
  • Revision title: border-top-left-radius
  • Revision id: 39710
  • Created:
  • Creator: josiewern
  • Is current revision? No
  • Comment adding summary: compat table revision to new format (no change this save); no changes

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

Firefox 1.0 (Gecko 1.0)

Firefox 3.5 (Gecko 1.9.1)

-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
Safari 3.0 (WebKit 522) -webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

5.0

 

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
4.0 (Gecko 2.0) border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Safari 5.0 (WebKit 532.5) border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Percentages 0.2 no Firefox 1.0 (Gecko 1.0)

Firefox 3.5 (Gecko 1.9.1)
yes {{ non-standard_inline() }} 9.0 yes 10.5 yes Safari 3.0 (WebKit 522) no
5.0 yes 4.0 (Gecko 2.0) yes Safari 5.0 (WebKit 532.5) yes
Elliptical corners 0.2 yes Firefox 1.0 (Gecko 1.0) no 9.0 yes 10.5 yes Safari 3.0 (WebKit 522) yes
Firefox 3.5 (Gecko 1.9.1) yes
5.0 yes 4.0 (Gecko 2.0) yes Safari 5.0 (WebKit 532.5) yes
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Browser compatibility

Browser Lowest version Support of Percentages Elliptical corners
Chrome 0.2 -webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
no yes
5.0 border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
yes yes
Firefox (Gecko) Firefox 1.0 (Gecko 1.0) -moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
yes {{ non-standard_inline() }} no
Firefox 3.5 (Gecko 1.9.1) yes
4.0 (Gecko 2.0) border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
yes yes
Internet Explorer 9.0 border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
yes yes
Opera 10.5 border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
yes yes
Safari (WebKit) Safari 3.0 (WebKit 522) -webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
no yes
Safari 5.0 (WebKit 532.5) border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
yes yes

Specifications

CSS 3 Backgrounds and Borders #border-radius

See also

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

{{ languages( { "de": "de/CSS/border-top-left-radius", "fr": "fr/CSS/-moz-border-radius-topleft", "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>Firefox 1.0 (Gecko 1.0)<br> <br> Firefox 3.5 (Gecko 1.9.1)</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"> <p>9.0</p> <p> </p> </td> <td rowspan="2"><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">Safari 3.0 (WebKit 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>5.0</p> <p> </p> </td> <td><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>4.0 (Gecko 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>Safari 5.0 (WebKit 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>0.2</td> <td>no</td> <td>Firefox 1.0 (Gecko 1.0)<br> <br> Firefox 3.5 (Gecko 1.9.1)</td> <td>yes {{ non-standard_inline() }}</td> <td rowspan="2">9.0</td> <td rowspan="2">yes</td> <td rowspan="2">10.5</td> <td rowspan="2">yes</td> <td>Safari 3.0 (WebKit 522)</td> <td>no</td> </tr> <tr> <td>5.0</td> <td>yes</td> <td>4.0 (Gecko 2.0)</td> <td>yes</td> <td>Safari 5.0 (WebKit 532.5)</td> <td>yes</td> </tr> <tr> <td rowspan="3">Elliptical corners</td> <td rowspan="2">0.2</td> <td rowspan="2">yes</td> <td>Firefox 1.0 (Gecko 1.0)</td> <td>no</td> <td rowspan="3" width="35">9.0</td> <td rowspan="3" width="180">yes</td> <td rowspan="3">10.5</td> <td rowspan="3">yes</td> <td rowspan="2">Safari 3.0 (WebKit 522)</td> <td rowspan="2">yes</td> </tr> <tr> <td>Firefox 3.5 (Gecko 1.9.1)</td> <td>yes</td> </tr> <tr> <td>5.0</td> <td>yes</td> <td>4.0 (Gecko 2.0)</td> <td>yes</td> <td>Safari 5.0 (WebKit 532.5)</td> <td>yes</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 compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Support of</th> <th>Percentages</th> <th>Elliptical corners</th> </tr> <tr> <td rowspan="2">Chrome</td> <td>0.2</td> <td><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>no</td> <td>yes</td> </tr> <tr> <td>5.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>yes</td> <td>yes</td> </tr> <tr> <td rowspan="3">Firefox (Gecko)</td> <td>Firefox 1.0 (Gecko 1.0)</td> <td rowspan="2"><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">yes {{ non-standard_inline() }}</td> <td>no</td> </tr> <tr> <td>Firefox 3.5 (Gecko 1.9.1)</td> <td>yes</td> </tr> <tr> <td>4.0 (Gecko 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>yes</td> <td>yes</td> </tr> <tr> <td>Internet Explorer</td> <td>9.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>yes</td> <td>yes</td> </tr> <tr> <td>Opera</td> <td>10.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> <td>yes</td> <td>yes</td> </tr> <tr> <td rowspan="2">Safari (WebKit)</td> <td>Safari 3.0 (WebKit 522)</td> <td><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>no</td> <td>yes</td> </tr> <tr> <td>Safari 5.0 (WebKit 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> <td>yes</td> <td>yes</td> </tr> </tbody>
</table>
<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/-moz-border-radius-topleft", "ja": "ja/CSS/border-top-left-radius", "pl": "pl/CSS/-moz-border-radius-topleft" } ) }}</p>
Revert to this revision