border-radius

  • Revision slug: CSS/border-radius
  • Revision title: border-radius
  • Revision id: 36148
  • Created:
  • Creator: Ispiked
  • Is current revision? No
  • Comment Apparently bug 24998 is fixed now, so it's not a known bug anymore!

Revision Content

{{ CSSMozExtensionRef() }}

Summary

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

  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements
  • {{ Xref_cssinitial() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}:


-moz-border-radius was one of the proposals leading to the proposed CSS 3 {{ Cssxref("border-radius") }} property, which has not yet reached Candidate Recommendation (call for implementations). However, the proposed {{ 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 {{ 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 solid #000000;
  width: 500px;
  height: 500px;
  /* the border will curve into a 'D' */
  -moz-border-radius: 10px 200px 200px 10px;
}

Known bugs

  • Rounded borders only support the solid {{ Cssxref("border-style") }}. {{ Bug("13944") }}

See also

{{ Cssxref("-moz-border-radius-topleft") }}, {{ Cssxref("-moz-border-radius-topright") }}, {{ Cssxref("-moz-border-radius-bottomright") }}, {{ Cssxref("-moz-border-radius-bottomleft") }}

{{ languages( { "fr": "fr/CSS/-moz-border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}

Revision Source

<p> {{ 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> {{ Xref_cssinitial() }}: 0
</li><li> Applies to: all elements
</li><li> {{ Xref_cssinitial() }}: no
</li><li> Percentages: N/A
</li><li> Media: {{ Xref_cssvisual() }}
</li><li> {{ Xref_csscomputed() }}: </li></ul>
<p><br>
<code>-moz-border-radius</code> was one of the proposals leading to the proposed CSS 3 {{ Cssxref("border-radius") }} property, which has not yet reached Candidate Recommendation (call for implementations). However, the proposed {{ 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 {{ 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 solid #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> Rounded borders only support the solid {{ Cssxref("border-style") }}. {{ Bug("13944") }}
</li></ul>
<h3 name="See_also"> See also </h3>
<p>{{ Cssxref("-moz-border-radius-topleft") }}, {{ Cssxref("-moz-border-radius-topright") }}, {{ Cssxref("-moz-border-radius-bottomright") }}, {{ Cssxref("-moz-border-radius-bottomleft") }}
</p>{{ languages( { "fr": "fr/CSS/-moz-border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}
Revert to this revision