outline-width
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.
Try it
It is often more convenient to use the shorthand property outline when defining the appearance of an outline.
Syntax
css
/* 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;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;
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
1pxin desktop browsers (including Firefox). medium-
Depends on the user agent. Typically equivalent to
3pxin desktop browsers (including Firefox). thick-
Depends on the user agent. Typically equivalent to
5pxin 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
Examples
Setting an element's outline width
HTML
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
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 |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
outline-width | |||||||||||