Revision 39690 of border-top-left-radius

  • Revision slug: CSS/border-top-left-radius
  • Revision title: border-top-left-radius
  • Revision id: 39690
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 9 words added, 1 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Mozilla applications like Firefox, the -moz-radius-topleft CSS property sets the rounding of the top-left corner of the border.

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

  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: {{ non-standard_inline() }} yes, relative to the width of the box
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: two absolute {{ Xref_csslength() }}s

Syntax

-moz-border-radius-topleft:  <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>
A percentage, 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 */
   -webkit-border-top-left-radius: 20px;  /* Safari/WebKit */
           border-top-left-radius: 20px;  /* future 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 since Firefox 3.5 */
    -webkit-border-top-left-radius: 20px 10px;  /* Safari/WebKit */
            border-top-left-radius: 20px 10px;  /* future browsers with CSS3 support */
}

Specifications

CSS 3 Backgrounds and Borders #border-radius Working draft

Browser compatibility

Browser percentages elliptical corners Support of
CSS3 Working Draft no yes border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Internet Explorer --- --- ---
Firefox 1.0 (Gecko 1.0) yes no -moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
Firefox 3.5 (Gecko 1.9.1) yes yes
Opera --- --- ---
Safari 3.0 (WebKit 522) no yes -webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

{{ languages( { "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 name="Summary">Summary</h3>
<p>In Mozilla applications like Firefox, the<code> -moz-radius-topleft </code>CSS property sets the rounding of the top-left corner of the border.</p>
<p>See {{ cssxref("-moz-border-radius") }} for more information.</p>
<ul> <li>{{ Xref_cssinitial() }}:<code> 0</code><span class="comment"><br> </span></li> <li>Applies to: all elements<span class="comment"><br> </span></li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: {{ non-standard_inline() }} yes, relative to the width of the box</li> <li>Media: {{ Xref_cssvisual() }}<span class="comment"><br> </span></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;? 
</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> A percentage, 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 */
   -webkit-border-top-left-radius: 20px;  /* Safari/WebKit */
           border-top-left-radius: 20px;  /* future 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 since Firefox 3.5 */
    -webkit-border-top-left-radius: 20px 10px;  /* Safari/WebKit */
            border-top-left-radius: 20px 10px;  /* future browsers with CSS3 support */
}</pre>
<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> Working draft</p>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>percentages</th> <th>elliptical corners</th> <th>Support of</th> </tr> <tr> <td>CSS3 Working Draft</td> <td>no</td> <td>yes</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>Internet Explorer</td> <td>---</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox 1.0 (Gecko 1.0)</td> <td>yes</td> <td>no</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> </tr> <tr> <td>Firefox 3.5 (Gecko 1.9.1)</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>Opera</td> <td>---</td> <td>---</td> <td>---</td> </tr> <tr> <td>Safari 3.0 (WebKit 522)</td> <td>no</td> <td>yes</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> </tr> </tbody>
</table>
<p>{{ languages( { "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