-moz-outline-radius

  • Revision slug: CSS/-moz-outline-radius
  • Revision title: -moz-outline-radius
  • Revision id: 286681
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment links changed from "-moz-border-radius" to "border-radius"; 2 words added, 6 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Mozilla applications like Firefox, the -moz-outline-radius CSS property can be used to give outlines rounded corners. An {{ cssxref("outline") }} is a line that is drawn around elements, outside the border edge, to make the element stand out.

-moz-outline-radius is a convenient shortcut to set the four properties {{ Cssxref("-moz-outline-radius-topleft") }}, {{ Cssxref("-moz-outline-radius-topright") }}, {{ Cssxref("-moz-outline-radius-bottomright") }} and {{ Cssxref("-moz-outline-radius-bottomleft") }}.

  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: ?

Syntax

-moz-outline-radius:   <outline-radius>{1,4} [ / <outline-radius>{1,4}]? | inherit

Values

Elliptical outlines and <percentage> values follow the syntax described in {{ Cssxref("border-radius") }}.

One, two, three or four <outline-radius> values, represents one of:

<length>
See {{ Xref_csslength() }} for possible values
<percentage>
A {{ Xref_csspercentage() }}; see {{ Cssxref("border-radius") }} for details
  • One single value applies to all 4 corners
  • Two values apply to 1. topLeft and bottomRight and 2. to the topRight and bottomLeft corner
  • Three values apply to 1. topLeft, 2. topRight and bottomLeft and 3. to the bottomRight corner
  • Four values apply to 1. topLeft, 2. topRight, 3. bottomRight and 4. to the bottomLeft corner

Examples

 outline: dotted red;

 -moz-outline-radius:  12% 1em 25px;
   /* is equivalent to: */
 -moz-outline-radius-topleft:     12%;
 -moz-outline-radius-topright:    1em;
 -moz-outline-radius-bottomright: 35px;
 -moz-outline-radius-bottomleft:  1em;

Notes

  • dotted or dashed radiused corners are rendered as solid, {{ Bug(382721) }}
  • Future versions of Gecko/Firefox may drop this property completely. See {{ Bug(593717) }} (remove -moz-outline-radius and make outlines follow border-radius)

Specifications

This property it is not defined in any CSS standard.

Browser compatibility

Support since Firefox 1.5 (Gecko 1.8). There is no correlative property in other major Browsers.

See also

{{ CSS_Reference:Outline() }}

{{ languages( { "fr": "fr/CSS/-moz-outline-radius", "pl": "pl/CSS/-moz-outline-radius" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3 id="Summary">Summary</h3>
<p>In Mozilla applications like Firefox, the<code> -moz-outline-radius </code>CSS property can be used to give outlines rounded corners. An {{ cssxref("outline") }} is a line that is drawn around elements, outside the border edge, to make the element stand out.</p>
<p><code>-moz-outline-radius </code>is a convenient shortcut to set the four properties {{ Cssxref("-moz-outline-radius-topleft") }}, {{ Cssxref("-moz-outline-radius-topright") }}, {{ Cssxref("-moz-outline-radius-bottomright") }} and {{ Cssxref("-moz-outline-radius-bottomleft") }}.</p>
<ul> <li>{{ Xref_cssinitial() }}: 0</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: ?</li>
</ul>
<h3 id="Syntax">Syntax</h3>
<pre>-moz-outline-radius:   &lt;outline-radius&gt;{1,4} [ / &lt;outline-radius&gt;{1,4}]? | inherit</pre>
<h3 id="Values">Values</h3>
<div class="note">Elliptical outlines and <code>&lt;percentage&gt;</code> values follow the syntax described in {{ Cssxref("border-radius") }}.</div>
<p>One, two, three or four<code> &lt;outline-radius&gt; </code>values, represents one of:</p>
<dl> <dt>&lt;length&gt;</dt> <dd>See {{ Xref_csslength() }} for possible values</dd> <dt>&lt;percentage&gt;</dt> <dd>A {{ Xref_csspercentage() }}; see {{ Cssxref("border-radius") }} for details</dd>
</dl>
<ul> <li><strong>One</strong> single value applies to <em>all 4 corners<br> </em></li> <li><strong>Two</strong> values apply to <strong>1.</strong> <em>topLeft and bottomRight</em> and <strong>2.</strong> to the <em>topRight and bottomLeft</em> corner</li> <li><strong>Three</strong> values apply to <strong>1.</strong> <em>top</em>Left, <strong>2.</strong> <em>topRight and bottomLeft</em> and <strong>3.</strong> to the <em>bottomRight</em> corner</li> <li><strong>Four</strong> values apply to <strong>1.</strong> <em>top</em>Left, <strong>2.</strong> <em>topRight</em>, <strong>3.</strong> <em>bottomRight</em> and <strong>4.</strong> to the <em>bottomLeft</em> corner</li>
</ul>
<h3 id="Examples">Examples</h3>
<pre style="border:none; -moz-outline-radius:12% 1em 35px; outline:dotted red"> outline: dotted red;

 -moz-outline-radius:  12% 1em 25px;
   /* is equivalent to: */
 -moz-outline-radius-topleft:     12%;
 -moz-outline-radius-topright:    1em;
 -moz-outline-radius-bottomright: 35px;
 -moz-outline-radius-bottomleft:  1em;
</pre>
<h3 id="Notes">Notes</h3>
<ul> <li><code>dotted </code>or<code> dashed </code>radiused corners are rendered as solid, {{ Bug(382721) }}</li> <li>Future versions of Gecko/Firefox may drop this property completely. See {{ Bug(593717) }} (remove <code>-moz-outline-radius </code>and make outlines follow<code> border-radius</code>)</li>
</ul>
<h3 id="Specifications">Specifications</h3>
<p>This property it is not defined in any CSS standard.</p>
<h3 id="Browser_compatibility">Browser compatibility</h3>
<p>Support since <strong>Firefox 1.5</strong> (Gecko 1.8). There is no correlative property in other major Browsers.</p>
<h3 id="See_also">See also</h3>
<p>{{ CSS_Reference:Outline() }}</p>
<p>{{ languages( { "fr": "fr/CSS/-moz-outline-radius", "pl": "pl/CSS/-moz-outline-radius" } ) }}</p>
Revert to this revision