-moz-outline-radius

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

Revision Content

{{template.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:

  • Initial value: 0
  • Applies to: all elements
  • Inherited: no

Syntax

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

Values

<outline-radius> 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.

Related properties

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;
}

Known bugs

These bugs are the same as {{template.Cssxref("-moz-border-radius")}}.

  • Background images spill beyond rounded borders. {{template.Bug(24998)}}
  • The rounded border currently has no anti-aliasing. {{template.Bug(16380)}}
  • Rounded borders only support the solid {{template.Cssxref("border-style")}}. {{template.Bug(13944)}}

Revision Source

<p> 
{{template.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> Initial value: 0
</li><li> Applies to: all elements
</li><li> Inherited: no
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">-moz-outline-radius: <i>&lt;outline-radius&gt;{1,4}</i> | inherit ;
</pre>
<h3 name="Values"> Values </h3>
<p><code><i>&lt;outline-radius&gt;</i></code> 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="Related_properties"> Related properties </h3>
<ul><li> <a href="en/CSS/-moz-outline">-moz-outline</a> sets the color, style, and width of the outline.
</li><li> <a href="en/CSS/-moz-outline-color">-moz-outline-color</a> sets the color of the outline.
</li><li> <a href="en/CSS/-moz-outline-offset">-moz-outline-offset</a> offsets the outline from the element.
</li><li> <a href="en/CSS/-moz-outline-radius-bottomleft">-moz-outline-radius-bottomleft</a> sets the rounding of the bottom-left corner.
</li><li> <a href="en/CSS/-moz-outline-radius-bottomright">-moz-outline-radius-bottomright</a> sets the rounding of the bottom-right corner.
</li><li> <a href="en/CSS/-moz-outline-radius-topleft">-moz-outline-radius-topleft</a> sets the rounding of the top-left corner.
</li><li> <a href="en/CSS/-moz-outline-radius-topright">-moz-outline-radius-topright</a> sets the rounding of the top-right corner.
</li><li> <a href="en/CSS/-moz-outline-style">-moz-outline-style</a> sets the style of the outline.
</li><li> <a href="en/CSS/-moz-outline-width">-moz-outline-width</a> sets the width of the outline.
</li></ul>
<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"> Known bugs </h3>
<p>These bugs are the same as {{template.Cssxref("-moz-border-radius")}}.
</p>
<ul><li> Background images spill beyond rounded borders. {{template.Bug(24998)}}
</li><li> The rounded border currently has no anti-aliasing. {{template.Bug(16380)}}
</li><li> Rounded borders only support the solid {{template.Cssxref("border-style")}}. {{template.Bug(13944)}}
</li></ul>
Revert to this revision