border-top-left-radius

  • Revision slug: CSS/border-top-left-radius
  • Revision title: border-top-left-radius
  • Revision id: 39703
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

{{ CSSRef() }}

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

Browser compatibility

Browser Lowest version Support of Percentages Elliptical corners
Chrome 0.2 -webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
no yes
5.0 border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
no yes
Firefox (Gecko) 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
4.0 (Gecko 2.0) border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
yes yes
Internet Explorer 9.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 (WebKit) 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
Safari 5.0 (WebKit 532.5) 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

See also

{{ cssxref("border-radius") }}

{{ languages( { "de": "de/CSS/border-top-left-radius", "fr": "fr/CSS/-moz-border-radius-topleft", "ja": "ja/CSS/-moz-border-radius-topleft", "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.</p>
<p>Previous to Gecko 2.0 (Firefox 4.0) it was named<code> -moz-border-radius-topleft</code>. This is 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 532.5) */
            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>Lowest version</th> <th>Support of</th> <th>Percentages</th> <th>Elliptical corners</th> </tr> <tr> <td rowspan="2">Chrome</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>no</td> <td>yes</td> </tr> <tr> <td>5.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>no</td> <td>yes</td> </tr> <tr> <td rowspan="3">Firefox (Gecko)</td> <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 rowspan="2">yes {{ non-standard_inline() }}</td> <td>no</td> </tr> <tr> <td>Firefox 3.5 (Gecko 1.9.1)</td> <td>yes</td> </tr> <tr> <td>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>Internet Explorer</td> <td>9.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</td> <td>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 rowspan="2">Safari (WebKit)</td> <td>Safari 3.0 (WebKit 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> <td>no</td> <td>yes</td> </tr> <tr> <td>Safari 5.0 (WebKit 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> <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>
<h3>See also</h3>
<p>{{ cssxref("border-radius") }}</p>
<p>{{ languages( { "de": "de/CSS/border-top-left-radius", "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