outline-width

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.g 2px, 0.1rem.
• thin: Equivalent to 1px in desktop browsers but can vary between user agents.
• medium: The default value. It’s equivalent to 3px in desktop browsers but can vary between user agents.
• thick: Equivalent to 5px in desktop browsers but can vary between user agents.
• initial: Applies the property’s default setting, which is medium.
• inherit: Adopts the outline-width value of the parent.
• unset: Removes the current outline-width from 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

More information

• CSS Basic User Interface Module Level 4
• MDN documentation

Related posts

Related