CSS:-moz-outline-radius

From MDC

« CSS Reference « CSS Reference:Mozilla Extensions

[edit] Summary

In Mozilla applications, -moz-outline-radius can be used to give outlines rounded corners. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:

• Initial value: 0
• Applies to: all elements
• Inherited: no
• Percentages: n/a
• Media: visual
• Computed value:

[edit] Syntax

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

[edit] Values

<outline-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-outline sets the color, style, and width of the outline.
• -moz-outline-color sets the color of the outline.
• -moz-outline-offset offsets the outline from the element.
• -moz-outline-radius-bottomleft sets the rounding of the bottom-left corner.
• -moz-outline-radius-bottomright sets the rounding of the bottom-right corner.
• -moz-outline-radius-topleft sets the rounding of the top-left corner.
• -moz-outline-radius-topright sets the rounding of the top-right corner.
• -moz-outline-style sets the style of the outline.
• -moz-outline-width sets the width of the outline.

[edit] Examples

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

[edit] Known bugs

These bugs are the same as -moz-border-radius.

• Background images spill beyond rounded borders. bug 24998
• Rounded borders only support the solid border-style. bug 13944