The outline-width
CSS property sets the 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;
The outline-width
property is specified as any one of the values listed below.
<length>
<length>
.thin
1px
in desktop browsers (including Firefox).medium
3px
in desktop browsers (including Firefox).thick
5px
in desktop browsers (including Firefox).<line-width>where
<line-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. | 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. |
Initial value | medium |
---|---|
Applies to | all elements |
Inherited | no |
Media | as each of the properties of the shorthand:
|
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1.5
|
8 | 7 | 1.2 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
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