Revision 39688 of border-top-left-radius

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

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Mozilla applications, -moz-radius-topleft 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: yes {{ non-standard_inline() }}
  • 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.
<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 elliptical corners percentages Support of
CSS3 Working Draft yes no border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Internet Explorer --- --- ---
Firefox 1.0 (Gecko 1.0) no yes -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) yes no -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,<code> -moz-radius-topleft </code>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: yes {{ non-standard_inline() }}</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.<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>elliptical corners</th> <th>percentages</th> <th>Support of</th> </tr> <tr> <td>CSS3 Working Draft</td> <td>yes</td> <td>no</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>no</td> <td>yes</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>yes</td> <td>no</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