W3cubDocs

/CSS

-moz-outline-radius

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

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.

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 definition

Initial value	as each of the properties of the shorthand: `-moz-outline-radius-topleft`: `0` `-moz-outline-radius-topright`: `0` `-moz-outline-radius-bottomright`: `0` `-moz-outline-radius-bottomleft`: `0`
Applies to	all elements
Inherited	no
Percentages	as each of the properties of the shorthand: `-moz-outline-radius-topleft`: refer to the corresponding dimension of the border box `-moz-outline-radius-topright`: refer to the corresponding dimension of the border box `-moz-outline-radius-bottomright`: refer to the corresponding dimension of the border box `-moz-outline-radius-bottomleft`: refer to the corresponding dimension of the border box
Computed value	as each of the properties of the shorthand: `-moz-outline-radius-topleft`: as specified `-moz-outline-radius-topright`: as specified `-moz-outline-radius-bottomright`: as specified `-moz-outline-radius-bottomleft`: as specified
Animation type	as each of the properties of the shorthand: `-moz-outline-radius-topleft`: a length, percentage or calc(); `-moz-outline-radius-topright`: a length, percentage or calc(); `-moz-outline-radius-bottomright`: a length, percentage or calc(); `-moz-outline-radius-bottomleft`: a length, percentage or calc();

Formal syntax

<outline-radius>{1,4} [ / <outline-radius>{1,4} ]?where 
<outline-radius> = <length> | <percentage>

Examples

Rounding an outline

Note: This example will not display the desired effect if you are viewing this in a browser other than Firefox.

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 were rendered as solid until Firefox 50, bug 382721
Future versions of Gecko/Firefox may drop this property completely. See bug 593717.

Specifications

Not part of any standard.

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
`-moz-outline-radius`	No	No	1	No	No	No

	Mobile
	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`-moz-outline-radius`	No	No	4	No	No	No