CSS:-moz-border-radius

From MDC

« CSS « CSS Reference « CSS Reference:Mozilla Extensions

[edit] Summary

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

• Initial value: 0
• Applies to: all elements
• Initial value: no
• Percentages: N/A
• Media: visual
• Computed value:

-moz-border-radius was one of the proposals leading to the proposed CSS 3 border-radius property, which has not yet reached Candidate Recommendation (call for implementations). However, the proposed 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 border-collapse is collapse.

[edit] Syntax

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

[edit] 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.

[edit] Related properties

• -moz-border-radius-bottomleft sets the rounding for the bottom-left curve.
• -moz-border-radius-bottomright sets the rounding for the bottom-right curve.
• -moz-border-radius-topleft sets the rounding for the top-left curve.
• -moz-border-radius-topright sets the rounding for the top-right curve.

[edit] 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;
}

[edit] Known bugs

• Rounded borders only support the solid border-style. bug 13944

[edit] See also

-moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomright, -moz-border-radius-bottomleft