The outline-width
CSS property sets the width (thickness) of an element's outline. An outline is a line that is drawn around an element, outside the border
.
It is often more convenient to use the shorthand property outline
when defining the appearance of an outline.
/* 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;
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 |
The outline-width
property is specified as any one of the values listed below.
thin
medium
thick
<length>
<length>
.<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="em">1.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; } #em { outline-width: 1.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 | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | Yes |
1.5 1 —? -moz- |
8 | 7 | 1.2 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | Yes | ? | ? | ? | ? |
© 2005–2018 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/outline-width