-moz-outline-radius

Summary

In Mozilla applications like Firefox, the -moz-outline-radius CSS property 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.

-moz-outline-radius is a convenient shortcut to set the four properties -moz-outline-radius-topleft, -moz-outline-radius-topright, -moz-outline-radius-bottomright and -moz-outline-radius-bottomleft.

Syntax

-moz-outline-radius:  <outline-radius>{1,4} [ / <outline-radius>{1,4}]? | inherit

Values

Elliptical outlines and <percentage> values follow the syntax described in border-radius.

One, two, three or four <outline-radius> values, represents one of:

<length>
See <length> for possible values
<percentage>
A <percentage>; see border-radius for details
  • One single value applies to all 4 corners
  • Two values apply to 1. topLeft and bottomRight and 2. to the topRight and bottomLeft corner
  • Three values apply to 1. topLeft, 2. topRight and bottomLeft and 3. to the bottomRight corner
  • Four values apply to 1. topLeft, 2. topRight, 3. bottomRight and 4. to the bottomLeft corner

Examples

 outline: dotted red;

 -moz-outline-radius:  12% 1em 25px;
   /* is equivalent to: */
 -moz-outline-radius-topleft:     12%;
 -moz-outline-radius-topright:    1em;
 -moz-outline-radius-bottomright: 35px;
 -moz-outline-radius-bottomleft:  1em;

Notes

  • dotted or dashed radiused corners are rendered as solid, bug 382721
  • Future versions of Gecko/Firefox may drop this property completely. See bug 593717 (remove -moz-outline-radius and make outlines follow border-radius)

Specifications

This property it is not defined in any CSS standard.

Browser compatibility

Support since Firefox 1.5 (Gecko 1.8). There is no correlative property in other major Browsers.

See also

Document Tags and Contributors

Last updated by: Sheppy,