この記事は技術レビューを必要としています。ぜひご協力ください。
この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
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-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
<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
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 |