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

mozilla

Revision 108363 of -moz-outline-radius

  • Revision slug: CSS/-moz-outline-radius
  • Revision title: -moz-outline-radius
  • Revision id: 108363
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 62 words added, 197 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Mozilla applications, -moz-outline-radius can be used to give outlines rounded corners. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:

  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: relative to the width of the box
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: ?

Syntax

-moz-outline-radius:  <outline-radius>{1,4} | inherit

Values

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

<length> 
a length
<percentage> 
a percentage, relative to the width of the box

Then the 4 values are used in the order top-left, top-right, bottom-right, and bottom-left. If fewer than 4 values are given, the list of values is repeated to fill the remaining values.

Examples

hbox.example {
  -moz-outline: #000000 solid 10px;
  width: 500px;
  height: 500px;
  /* the outline will curve into a 'D' */
  -moz-outline-radius: 10px 200px 200px 10px;
}

Notes

Dotted/dashed radiused corners are rendered as solid, {{ Bug("382721") }}

Specifications

This property it is not defined in any CSS standard.

Browser compatibility

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 name="Summary">Summary</h3>
<p>In Mozilla applications,<code> -moz-outline-radius </code>can be used to give outlines rounded corners. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:</p>
<ul> <li>{{ Xref_cssinitial() }}: 0</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: relative to the width of the box</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: ?</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">-moz-outline-radius:  &lt;outline-radius&gt;{1,4} | inherit
</pre>
<h3 name="Values">Values</h3>
<p>One, two, three or four<code> &lt;outline-radius&gt; </code>values, represents one of:</p>
<dl><dt> &lt;length&gt; </dt><dd> a length </dd><dt> &lt;percentage&gt; </dt><dd> a percentage, relative to the width of the box </dd></dl>
<p>Then the 4 values are used in the order top-left, top-right, bottom-right, and bottom-left. If fewer than 4 values are given, the list of values is repeated to fill the remaining values.</p>
<h3 name="Examples">Examples</h3>
<pre>hbox.example {
  -moz-outline: #000000 solid 10px;
  width: 500px;
  height: 500px;
  /* the outline will curve into a 'D' */
  -moz-outline-radius: 10px 200px 200px 10px;
}
</pre>
<h3 name="Known_bugs">Notes</h3>
<p>Dotted/dashed radiused corners are rendered as solid, {{ Bug("382721") }}</p>
<h3 name="Known_bugs">Specifications</h3>
<p>This property it is not defined in any CSS standard.</p>
<h3>Browser compatibility</h3>
<p>There is no correlative property in other major Browsers. </p>
<h3>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