Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 39693 of border-top-left-radius

  • Revision slug: CSS/border-top-left-radius
  • Revision title: border-top-left-radius
  • Revision id: 39693
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment +de / -"template."; 16 words added, 20 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Mozilla applications like Firefox, the {{ cssxref("-moz-border-radius-topleft") }} CSS property sets the rounding of the top-left corner of the element.

See {{ cssxref("-moz-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>? 

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>
In Gecko (Firefox) {{ 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).
In CSS 3: 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.

Examples

div { -moz-border-radius-topleft:  20px;  /* Firefox */
   -webkit-border-top-left-radius: 20px;  /* Safari/WebKit */
           border-top-left-radius: 20px;  /* Opera; 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;  /* Opera; future browsers with CSS3 support */
}

Browser compatibility

Browser Support of percentages elliptical corners
CSS3 Recommendation border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
yes yes
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
Opera 10.5 border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
yes yes
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

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>In Mozilla applications like Firefox, the {{ cssxref("-moz-border-radius-topleft") }} CSS property sets the rounding of the top-left corner of the element.</p>
<p>See {{ cssxref("-moz-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;? 
</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>In Gecko (Firefox) {{ 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).<br> <strong>In CSS 3:</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.</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;  /* Opera; 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;  /* Opera; future 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>CSS3 Recommendation</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>---</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>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>Safari 3.0 (WebKit 522)</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> </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