outline-width

outline-width sets an outline’s thickness. It needs a visible outline style; width alone does not draw a line.

Compare precise thicknesses

The two boxes use 1px and 4px outlines. Their content boxes keep the same layout dimensions.

<p class="sample thin">1px outline</p>
<p class="sample wide">4px outline</p>

.sample {
  padding: 0.75rem;
  outline-style: solid;
  outline-color: #2563eb;
  margin: 1rem;
}
.thin {
  outline-width: 1px;
}
.wide {
  outline-width: 4px;
}

Keep focus thickness separate from the border

Tab to the button. Its 3px focus outline does not replace or enlarge its 1px border.

<button type="button">Inspect the focus outline</button>

button {
  padding: 0.75rem 1rem;
  border: 1px solid #94a3b8;
  font: inherit;
}
button:focus-visible {
  outline-style: solid;
  outline-color: #172554;
  outline-width: 3px;
  outline-offset: 3px;
}

Values and defaults

The initial width is medium and the property is not inherited. Thin, medium, and thick have browser-defined sizes; they are not fixed pixel aliases. A length must be nonnegative; percentages are invalid. A zero width hides the outline. When outline-style is none, the effective computed width is zero.

Common mistakes

You do not need to set the outline shorthand first; longhands or browser focus styles can supply the rest. Width changes do not reserve space around the element. A later outline shorthand can reset this width. Test focus visibility at zoom and against the actual surrounding colors rather than choosing thickness alone.

Learn outline-style, outline-offset, and border.

Sources and browser support

MDN: outline-width describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.