Revision 36141 of border-radius

  • Revision slug: CSS/border-radius
  • Revision title: border-radius
  • Revision id: 36141
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment /* Syntax */

Revision Content

{{template.CSSMozExtensionRef()}}

Summary

In Mozilla applications, -moz-border-radius can be used to give borders rounded corners.

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

-moz-border-radius was one of the proposals leading to the proposed CSS 3 {{template.Cssxref("border-radius")}} property, which has not yet reached Candidate Recommendation (call for implementations). However, the proposed {{template.Cssxref("border-radius")}} property allows elliptical rounding, but does not allow different values for each corner.

-moz-border-radius does not apply to table elements when {{template.Cssxref("border-collapse")}} is collapse.

Syntax

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

Values

<border-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 {
  border: 10px double #000000;
  width: 500px;
  height: 500px;
  /* the border will curve into a 'D' */
  -moz-border-radius: 10px 200px 200px 10px;
}

Known bugs

  • 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-border-radius</code> can be used to give borders rounded corners.
</p>
<ul><li> Initial value: 0
</li><li> Applies to: all elements
</li><li> Inherited: no
</li></ul>
<p><code>-moz-border-radius</code> was one of the proposals leading to the proposed CSS 3 {{template.Cssxref("border-radius")}} property, which has not yet reached Candidate Recommendation (call for implementations).  However, the proposed {{template.Cssxref("border-radius")}} property allows elliptical rounding, but does not allow different values for each corner.
</p><p><code>-moz-border-radius</code> does not apply to table elements when {{template.Cssxref("border-collapse")}} is <code>collapse</code>.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">-moz-border-radius: &lt;border-radius&gt;{1,4} | inherit
</pre>
<h3 name="Values"> Values </h3>
<p>&lt;border-radius&gt; 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-border-radius-bottomleft">-moz-border-radius-bottomleft</a> sets the rounding for the bottom-left curve.
</li><li> <a href="en/CSS/-moz-border-radius-bottomright">-moz-border-radius-bottomright</a> sets the rounding for the bottom-right curve.
</li><li> <a href="en/CSS/-moz-border-radius-topleft">-moz-border-radius-topleft</a> sets the rounding for the top-left curve.
</li><li> <a href="en/CSS/-moz-border-radius-topright">-moz-border-radius-topright</a> sets the rounding for the top-right curve.
</li></ul>
<h3 name="Examples"> Examples </h3>
<pre>hbox.example {
  border: 10px double #000000;
  width: 500px;
  height: 500px;
  /* the border will curve into a 'D' */
  -moz-border-radius: 10px 200px 200px 10px;
}
</pre>
<h3 name="Known_bugs"> Known bugs </h3>
<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