mozilla

Revision 36162 of border-radius

  • Revision slug: CSS/border-radius
  • Revision title: border-radius
  • Revision id: 36162
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment no wording changes

Revision Content

{{ CSSMozExtensionRef() }}

Summary

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

Note: In Gecko 1.9.1, this property was updated to match the latest revision to the CSS3 specification for the border radius properties.
  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements, except the table element when border-collapse is collapse
  • {{ Xref_cssinherited() }}: no
  • Percentages: yes {{ non-standard_inline() }}
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}:

-moz-border-radius is Mozilla's implementation of the border-radius properties in CSS3. Mozilla implements the standard except it extends it to allow percentages for the radius in addition to lengths.

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

Syntax

-moz-border-radius: <border-radius>{1,4} [ / <border-radius>{1,4}]?

Values

<border-radius> represents one of:

<length>
See {{ Xref_csslength() }} for possible units.
<percentage>
A percentage, relative to the width of the box (the percentage is relative to the width even when specifying the radius for a height).

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.

If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius.  If the slash is omitted, then the same values are used to set both horizontal and vertical radii.

For example:

-moz-border-radius: 4px 3px 6px / 2px 4px;

is equivalent to:

-moz-border-top-left-radius: 4px 2px;
-moz-border-top-right-radius: 3px 4px;
-moz-border-bottom-right-radius: 6px 2px;
-moz-border-bottom-left-radius: 3px 4px;
Note: The slash plus additional border radius values syntax is not supported prior to Gecko 1.9.1.

Related properties

Examples

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

Known bugs

  • Dotted and dashed rounded border corners are rendered as solid; see {{ bug("382721") }}.

See also

  • The 'border-radius' properties (CSS3 specification)
  • {{ Cssxref("-moz-border-top-left-radius") }}
  • {{ Cssxref("-moz-border-top-right-radius") }}
  • {{ Cssxref("-moz-border-bottom-right-radius") }}
  • {{ Cssxref("-moz-border-bottom-left-radius") }}

{{ languages( { "fr": "fr/CSS/-moz-border-radius", "ja": "ja/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>
<div class="note"><strong>Note:</strong> In Gecko 1.9.1, this property was updated to match the latest revision to the CSS3 specification for the border radius properties.</div>
<ul> <li>{{ Xref_cssinitial() }}: 0</li> <li>Applies to: all elements, except the <code>table</code> element when <code>border-collapse</code> is <code>collapse</code></li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: yes {{ non-standard_inline() }}</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}:</li>
</ul>
<p><code>-moz-border-radius <span style="font-family: Verdana,Tahoma,sans-serif;">is Mozilla's implementation of the border-radius properties in CSS3. Mozilla implements the standard except it extends it to allow percentages for the radius in addition to lengths.</span></code></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} [ / &lt;border-radius&gt;{1,4}]?
</pre>
<h3 name="Values">Values</h3>
<p><code>&lt;border-radius&gt; </code>represents one of:</p>
<dl><dt>&lt;length&gt;</dt><dd> See {{ Xref_csslength() }} for possible units. </dd><dt>&lt;percentage&gt;</dt><dd> A percentage, relative to the width of the box (the percentage is relative to the width even when specifying the radius for a height). </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>
<div function="template.style_gecko_minversion($, '1.9.1')">
<p>If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius.  If the slash is omitted, then the same values are used to set both horizontal and vertical radii.</p>
<p>For example:</p>
<pre>-moz-border-radius: 4px 3px 6px / 2px 4px;
</pre>
<p>is equivalent to:</p>
<pre>-moz-border-top-left-radius: 4px 2px;
-moz-border-top-right-radius: 3px 4px;
-moz-border-bottom-right-radius: 6px 2px;
-moz-border-bottom-left-radius: 3px 4px;
</pre>
<div class="note"><strong>Note:</strong> The slash plus additional border radius values syntax is not supported prior to Gecko 1.9.1.</div>
</div>
<h3 name="Related_properties">Related properties</h3>
<ul> <li><a href="/En/CSS/-moz-border-bottom-left-radius" title="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-bottom-right-radius" title="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-top-left-radius" title="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-top-right-radius" title="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: 0 200px 200px 0;
}
</pre>
<h3 name="Known_bugs">Known bugs</h3>
<ul> <li>Dotted and dashed rounded border corners are rendered as solid; see {{ bug("382721") }}.</li>
</ul>
<h3 name="See_also">See also</h3>
<ul> <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-border-radius" title="http://dev.w3.org/csswg/css3-background/#the-border-radius">The 'border-radius' properties</a> (CSS3 specification)</li> <li>{{ Cssxref("-moz-border-top-left-radius") }}</li> <li>{{ Cssxref("-moz-border-top-right-radius") }}</li> <li>{{ Cssxref("-moz-border-bottom-right-radius") }}</li> <li>{{ Cssxref("-moz-border-bottom-left-radius") }}</li>
</ul>
<p>{{ languages( { "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/-moz-border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}</p>
Revert to this revision