border-radius

  • Revision slug: CSS/border-radius
  • Revision title: border-radius
  • Revision id: 36139
  • 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

where <border-radius> represents one of:

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

Values

<number>
The radius (in px or em) of the curved border.
  • If one number is given, all borders have the same curve.
  • If two numbers are given, the top-left and bottom-right have the same curve, and the top-right and bottom-left have the same curve.
  • If three numbers are given, the top-right and bottom-left borders have the same curve.
  • If all four numbers are given, the borders have different curves, in the order top-left, top-right, bottom-right, and bottom-left.

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>
<p><b>-moz-border-radius: &lt;border-radius&gt;{1,4} | inherit</b>
</p><p>where &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>
<h3 name="Values"> Values </h3>
<dl><dt> &lt;number&gt;</dt><dd> The radius (in px or em) of the curved border.
</dd></dl>
<ul><li> If one number is given, all borders have the same curve.
</li><li> If two numbers are given, the top-left and bottom-right have the same curve, and the top-right and bottom-left have the same curve.
</li><li> If three numbers are given, the top-right and bottom-left borders have the same curve.
</li><li> If all four numbers are given, the borders have different curves, in the order top-left, top-right, bottom-right, and bottom-left.
</li></ul>
<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