-moz-outline-radius

In Mozilla applications like Firefox, the -moz-outline-radius CSS property can be used to give an element's outline rounded corners.

/* One value */
-moz-outline-radius: 25px;

/* Two values */
-moz-outline-radius: 25px 1em;

/* Three values */
-moz-outline-radius: 25px 1em 12%;

/* Four values */
-moz-outline-radius: 25px 1em 12% 4mm;

/* Global values */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;

This property is a shorthand for setting the four properties -moz-outline-radius-topleft, -moz-outline-radius-topright, -moz-outline-radius-bottomright and -moz-outline-radius-bottomleft.

Syntax

Values

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.

• If a single value is set, it applies to all 4 corners.
• If two values are set, the first one applies to the top-left and bottom-right corners and the second one to the top-right and bottom-left corners.
• If three values are set, the first one applies to the top-Left corner, the second one to the top-right and bottom-left corners and the third one to the bottom-right corner.
• If four values are set, the first one applies to the top-left corner, the second one to the top-right corner, the third one to the bottom-right corner and the fourth one to the bottom-left corner.

Formal syntax

<outline-radius>{1,4} [ / <outline-radius>{1,4} ]?

Example

HTML

<p>This element has a rounded outline!</p>

CSS

p {
  margin: 5px;
  border: 1px solid black;
  outline: dotted red;
  -moz-outline-radius: 12% 1em 25px;
}

Result

Notes

• dotted or dashed radiused corners are rendered as solid, bug 382721
• Future versions of Gecko/Firefox may drop this property completely. See bug 315209.

Specifications

This property it is not defined in any CSS standard.

Browser compatibility