outline-offset

outline-offset sets the distance between an outline and the box’s border edge. Positive values move it outward; negative values move it inward. It does not add margin or padding.

Compare zero and positive offset

The second outline has a transparent 6px gap from the border. That gap shows the surrounding background.

<p class="sample zero">Offset 0</p>
<p class="sample outside">Offset 6px</p>

.sample {
  padding: 0.75rem;
  border: 1px solid #94a3b8;
  outline: 2px solid #2563eb;
  margin: 1.5rem 1rem;
}
.zero {
  outline-offset: 0;
}
.outside {
  outline-offset: 6px;
}

Draw an inset focus indicator

A negative offset moves the outline inside the button. Padding keeps it clear of the label. Tab to the button to inspect it.

<button type="button">Inset focus indicator</button>

button {
  padding: 1rem;
  font: inherit;
  border: 1px solid #94a3b8;
  background: #eff6ff;
}
button:focus-visible {
  outline: 3px solid #172554;
  outline-offset: -6px;
}

Values and defaults

The initial value is 0 and the property is not inherited. It accepts a length, including negative lengths; percentages are not valid. Outline-offset works with outlines defined through longhands or browser styles, not just outlines set with the shorthand.

Common mistakes

An offset cannot make an absent outline visible: supply a visible style and nonzero width. The outline and its gap do not reserve layout space. Large positive offsets may collide with neighbors or be clipped by overflow. Large negative offsets may obscure the label. This property is separate from outline and is not reset by that shorthand.

Learn outline, outline-width, and overflow.

Sources and browser support

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