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 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
.
Initial value | as each of the properties of the shorthand: |
---|---|
Applies to | all elements |
Inherited | no |
Percentages | as each of the properties of the shorthand:
|
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<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>
; seeborder-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
ordashed
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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | No support | 1.5 (1.8) | No support | No support | No support |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | 1.0 (1.8) | ? | No support | No support | No support | No support |