Revision 314009 of -moz-outline-radius

  • Revision slug: CSS/-moz-outline-radius
  • Revision title: -moz-outline-radius
  • Revision id: 314009
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

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() }}

Revision Source

<div>{{ CSSMozExtensionRef() }}</div>

<h2 id="Summary" name="Summary">Summary</h2>
<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 class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> 0</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Percentages</dfn> yes</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> ?</li>
</ul>

<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
-moz-outline-radius:  &lt;outline-radius&gt;{1,4} [ / &lt;outline-radius&gt;{1,4}]? | inherit</pre>

<h3 id="Values" name="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</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>


<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush:css">
 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>
 
<h2 id="Notes" name="Notes">Notes</h2>
<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>

<h2 id="Specifications" name="Specifications">Specifications</h2>
<p>This property it is not defined in any CSS standard.</p>


<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>Support since <strong>Firefox 1.5</strong> (Gecko 1.8). There is no correlative property in other major Browsers.</p>


<h2 id="See_also" name="Browser_compatibility">See also</h2>
<ul><li>{{ CSS_Reference:Outline() }}</li></ul>
Revert to this revision