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 3The 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
outline-width
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 1.5 Full support 1.5 No support 1 — 3.6 Prefixed' Implemented with the vendor prefix: -moz- |
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.
outline-width by Mozilla Contributors is licensed under CC-BY-SA 2.5.