The outline-width
CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:
Initial value | medium |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual, interactive |
Computed value | an absolute length; if the keyword none is specified, the computed value is 0
|
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
/* Keyword values */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> values */ outline-width: 1px; outline-width: 0.1em; /* Global values */ outline-width: inherit;
thin
medium
thick
<length>
<length>
values.<br-width>where
<br-width> = <length> | thin | medium | thick
<span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="twoem">2em</span>
span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #oneex { outline-width: 1ex; } #twoem { outline-width: 2em; }
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3 The definition of 'outline-width' in that specification. | Candidate Recommendation | No change |
CSS Transitions The definition of 'outline-width' in that specification. | Working Draft | Defines outline-width as animatable. |
CSS Level 2 (Revision 1) The definition of 'outline-width' in that specification. | Recommendation | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.5 (1.8)[1] | 8.0 | 7.0 | 1.2 (125) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? |
[1] In browsers previous to Gecko 1.8 (Firefox 1.5) essentially the same effect can be achieved using Mozilla CSS Extension -moz-outline-width
.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-width