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, the -moz-outline-radius-bottomleft
CSS property can be used to round the bottom-left corner of an element's outline
.
Syntax
The value of -moz-outline-radius-bottomleft
is either a CSS <length>
or a percentage of the corresponding dimensions of the border box. The calc()
function may be used as well.
Values
<length>
- The radius of the circle defining the curvature of the bottom and left edges of the element, specified as a CSS
<length>
. <percentage>
- The radius of the circle defining the rounding of the bottom-left corner of the element, specified as the percentages of the bottom and left sides of the border box.
Formal definition
Initial value | 0 |
---|---|
Applies to | all elements |
Inherited | no |
Percentages | refer to the corresponding dimension of the border box |
Computed value | as specified |
Animation type | a length, percentage or calc(); |
Formal syntax
<outline-radius>where
<outline-radius> = <length> | <percentage>
Examples
Rounding a outline
Since this is a Firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than Firefox.
HTML
<p>Look at this paragraph's bottom-left corner.</p>
CSS
p { margin: 10px; border: solid cyan; outline: dotted green; -moz-outline-radius-bottomleft: 2em; }
Result
Specifications
Not part of any standard.
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
-moz-outline-radius-bottomleft | Chrome No support No | Edge No support No | Firefox Full support 1 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 4 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
See also
- See the
-moz-outline-radius
property for more information.