outline-width

Avatar of Mojtaba Seyedi
Mojtaba Seyedi on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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

IEEdgeChromeFirefoxSafariOpera
8+AllAllAllAllAll
iOS SafariAndroid ChromeAndroid FirefoxAndroid BrowserOpera Mobile
AllAllAll9264
Source: caniuse

More information