This article needs a technical review. How you can help.
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.
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.
| 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:
|
| Animatable | as each of the properties of the shorthand: |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* 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;
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-radiusfor 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
<style>
p {
border: 1px solid black;
outline: dotted red; -moz-outline-radius: 12% 1em 25px;
}
</style> </head>
<body> <p>The outline-style Property using -moz-outline-radius</p> </body>
<head> <style>
p1 {
border: 1px solid black; outline: dotted red;
-moz-outline-radius-topleft: 12%;
-moz-outline-radius-topright: 1em;
-moz-outline-radius-bottomright: 35px;
-moz-outline-radius-bottomleft: 1em; }
</style> </head>
<body> <p1>The outline-style Property using more complicated -moz-outline-radius-xxx </p1> </body>
Result
Notes
dottedordashedradiused 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 |