border-top-right-radius

  • Revision slug: CSS/border-top-right-radius
  • Revision title: border-top-right-radius
  • Revision id: 39665
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 250 words added

Revision Content

{{ CSSMozExtensionRef() }}

Summary

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

See the {{ cssxref("-moz-border-radius") }} property 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-topright:  <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-topright:  20px;  /* Firefox */
   -webkit-border-top-right-radius: 20px;  /* Safari/WebKit */
           border-top-right-radius: 20px;  /* future browsers with CSS3 support */
}
/* elliptical corners supported since Firefox 3.5 (Gecko 1.9.1) */
  
div { -moz-border-radius-topright:   20px;       /* round corner, fallback for Firefox 1-3.0 */
      -moz-border-radius-topright:   20px 10px;  /* elliptical border since Firefox 3.5 */
    -webkit-border-top-right-radius: 20px 10px;  /* Safari/WebKit */
            border-top-right-radius: 20px 10px;  /* future browsers with CSS3 support */
}

Specifications

CSS 3 Backgrounds and Borders #border-radius Working draft

Browser compatibility

CSS3 Working Draft IE Firefox 1.0 (Gecko 1.0) Opera Safari 3.0 (WebKit 522)
border-top-right-radius --- -moz-border-radius-topright --- -webkit-border-top-right-radius
border-top-left-radius --- -moz-border-radius-topleft --- -webkit-border-top-left-radius
border-bottom-right-radius --- -moz-border-radius-bottomright --- -webkit-border-bottom-right-radius
border-bottom-left-radius --- -moz-border-radius-bottomleft --- -webkit-border-bottom-left-radius

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

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3>Summary</h3>
<p>In Mozilla applications like Firefox, the<code> -moz-border-radius-topright </code>CSS property sets the rounding of the top-right corner of the border.</p>
<p>See the {{ cssxref("-moz-border-radius") }} property 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-topright:  &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-topright:  20px;  /* Firefox */
   -webkit-border-top-right-radius: 20px;  /* Safari/WebKit */
           border-top-right-radius: 20px;  /* future browsers with CSS3 support */
}
</pre>
<pre>/* elliptical corners supported since Firefox 3.5 (Gecko 1.9.1) */
  
div { -moz-border-radius-topright:   20px;       /* round corner, fallback for Firefox 1-3.0 */
      -moz-border-radius-topright:   20px 10px;  /* elliptical border since Firefox 3.5 */
    -webkit-border-top-right-radius: 20px 10px;  /* Safari/WebKit */
            border-top-right-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>CSS3 Working Draft</th> <th>IE</th> <th>Firefox 1.0 (Gecko 1.0)</th> <th>Opera</th> <th>Safari 3.0 (WebKit 522)</th> </tr> <tr> <th><code>border-top-right-radius</code></th> <td>---</td> <td><code>-moz-border-radius-topright</code></td> <td>---</td> <td><code>-webkit-border-top-right-radius</code></td> </tr> <tr> <th><code>border-top-left-radius</code></th> <td>---</td> <td><code>-moz-border-radius-topleft</code></td> <td>---</td> <td><code>-webkit-border-top-left-radius</code></td> </tr> <tr> <th><code>border-bottom-right-radius</code></th> <td>---</td> <td><code>-moz-border-radius-bottomright</code></td> <td>---</td> <td><code>-webkit-border-bottom-right-radius</code></td> </tr> <tr> <th><code>border-bottom-left-radius</code></th> <td>---</td> <td><code>-moz-border-radius-bottomleft</code></td> <td>---</td> <td><code>-webkit-border-bottom-left-radius</code></td> </tr> </tbody>
</table>
<p>{{ languages( { "fr": "fr/CSS/-moz-border-radius-topright", "ja": "ja/CSS/-moz-border-radius-topright","pl": "pl/CSS/-moz-border-radius-topright" } ) }}</p>
Revert to this revision