mozilla

Revision 39720 of border-top-left-radius

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

Previous to Gecko 2.0 {{ geckoRelease("2.0") }}, this property was called -moz-border-radius-topleft. This was supported as an alias for a transitional period and finally dropped with Gecko 13.0 {{ geckoRelease("13.0") }}.

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

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. The rounding can be a circle or an ellipse.</p>
<p>Previous to Gecko 2.0 {{ geckoRelease("2.0") }}, this property was called<code> -moz-border-radius-topleft</code>. This was supported as an alias for a transitional period and finally dropped with Gecko 13.0 {{ geckoRelease("13.0") }}.</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>
<h3>Syntax</h3>
<pre class="eval">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>Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table" style="width:120em"> <tbody> <tr> <th>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>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>1.0 (1.0)</td> <td><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">9.0</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">10.5</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>3.0 (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> </tr> <tr> <td>4.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>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