border-top-left-radius

  • Revision slug: CSS/border-top-left-radius
  • Revision title: border-top-left-radius
  • Revision id: 39696
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment renamed without -moz-prefix; 96 words added, 54 words removed; page display name changed to 'border-top-left-radius | -moz-border-radius-topleft'

Revision Content

{{ CSSMozExtensionRef() }}

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) this was named -moz-border-radius-topleft. This 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 533) */
            border-top-left-radius: 20px 10px;  /* Firefox 4, browsers with CSS3 support */
}

Browser compatibility

Browser Support of Percentages Elliptical corners
Internet Explorer --- --- ---
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 {{ non-standard_inline() }} yes
Firefox 4.0 (Gecko 2.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 3.0 | Chrome 0.2
(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 | Chrome 5.0
(WebKit 533)

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
no yes

Specifications

CSS 3 Backgrounds and Borders #border-radius

{{ languages( { "de": "de/CSS/-moz-border-radius-topleft", "fr": "fr/CSS/-moz-border-radius-topleft", "ja": "ja/CSS/-moz-border-radius-topleft", "pl": "pl/CSS/-moz-border-radius-topleft" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}</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) this was named<code> -moz-border-radius-topleft</code>. This 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" style="white-space: nowrap;">-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 533) */
            border-top-left-radius: 20px 10px;  /* Firefox 4, browsers with CSS3 support */
}</pre>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Support of</th> <th>Percentages</th> <th>Elliptical corners</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> <td>---</td> <td>---</td> </tr> <tr> <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>yes {{ non-standard_inline() }}</td> <td>no</td> </tr> <tr> <td>Firefox 3.5 (Gecko 1.9.1)</td> <td>yes {{ non-standard_inline() }}</td> <td>yes</td> </tr> <tr> <td>Firefox 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>Opera 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> <p>Safari 3.0 | Chrome 0.2<br> (WebKit 522)</p> </td> <td><code>-webkit-border-top-left-radius<br> </code><code>-webkit-</code><code>border-top-right-radius<br> </code><code>-webkit-</code><code>border-bottom-right-radius<br> </code><code>-webkit-</code><code>border-bottom-left-radius</code></td> <td>no</td> <td>yes</td> </tr> <tr> <td> <p>Safari 5.0 | Chrome 5.0<br> (WebKit 533)</p> </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>no</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>
<p>{{ languages( { "de": "de/CSS/-moz-border-radius-topleft", "fr": "fr/CSS/-moz-border-radius-topleft", "ja": "ja/CSS/-moz-border-radius-topleft", "pl": "pl/CSS/-moz-border-radius-topleft" } ) }}</p>
Revert to this revision