The outline-width CSS property specifies the thickness of an element’s outline. What’s an outline? An outline is a line that is drawn around elements — outside the border edge — that is used for accessibility or decoration purposes when that element is in focus.
button:focus {
outline-width: 5px;
}We usually set the outline of an element using the shorthand property which has outline-width included:
a:focus {
outline: 5px solid gray;
}outline-width is a constituent property in the outline shorthand and is defined in the CSS Basic User Interface Module Level 4 specification which is currently in Editor’s Draft status.
Syntax
outline-width: <line-width>
/* where */
<line-width> = <length> | thin | medium | thick- Initial value:
medium - Applies to: all elements
- Inherited: no
- Computed value: absolute length; 0 if the outline style is
none - Animation type: by computed value
Values
/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;
/* <length> values */
outline-width: 1px;
outline-width: 0.2em;
outline-width: 0.2cm;
/* Global values */
outline-width: initial;
outline-width: inherit;
outline-width: unset;<length>: The thickness of the outline set as a<length>, e.g2px,0.1rem.thin: Equivalent to1pxin desktop browsers but can vary between user agents.medium: The default value. It’s equivalent to3pxin desktop browsers but can vary between user agents.thick: Equivalent to5pxin desktop browsers but can vary between user agents.initial: Applies the property’s default setting, which ismedium.inherit: Adopts theoutline-widthvalue of the parent.unset: Removes the currentoutline-widthfrom the element.
Example
The following example makes the outline of the text input thicker once it’s focused:
input {
outline: 1px solid lightblue;
}
input:focus {
outline-width: 3px;
}Demo
Browser support
| IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 8+ | All | All | All | All | All |
| iOS Safari | Android Chrome | Android Firefox | Android Browser | Opera Mobile |
|---|---|---|---|---|
| All | All | All | 92 | 64 |
