The CSS outline-width
property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
It is often more convenient to use the shorthand property outline
when defining the appearance of an outline.
Syntax
/* 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.
Values
<length>
- The width of the outline specified as a
<length>
. thin
- Depends on the user agent. Typically equivalent to
1px
in desktop browsers (including Firefox). medium
- Depends on the user agent. Typically equivalent to
3px
in desktop browsers (including Firefox). thick
- Depends on the user agent. Typically equivalent to
5px
in desktop browsers (including Firefox).
Formal definition
Initial value | medium |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | an absolute length; if the keyword none is specified, the computed value is 0 |
Animation type | a length |
Formal syntax
<line-width>where
<line-width> = <length> | thin | medium | thick
Examples
Setting an element's outline width
HTML
<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>
CSS
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; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3 The definition of 'outline-width' in that specification. |
Recommendation | No change. |
CSS Level 2 (Revision 1) The definition of 'outline-width' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
outline-width | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
1.5
| IE Full support 8 | Opera Full support 7 | Safari Full support 1.2 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.