CSS outline-offset: How to Space Outlines

The CSS outline-offset property controls the space between an element's border edge and its rendered outline. Unlike standard borders or margins, outlines do not occupy document flow or trigger layout recalculations. By adjusting outline-offset, developers can push an outline outward for cleaner visual spacing or pull it inward for inset effects, making it a critical tool for styling accessible, high-visibility focus indicators without disrupting existing page layouts.

What is outline-offset?

The outline-offset property sets the distance between an element's edge (or border, if present) and its outline.

In CSS, an outline is drawn directly outside an element's border edge by default. While borders consume space within the CSS box model, outlines do not; they float visually above the layout. The outline-offset property enhances this behavior by creating transparent space between the outline and the element boundary.

Syntax and Values

The property accepts standard CSS length units (such as px, em, rem, etc.):

.element {
  outline: 2px solid #0066cc;
  outline-offset: 4px;
}

Positive Values

A positive length moves the outline further away from the element.

button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px; /* Outline sits 3px outside the element */
}

When a positive value is applied, the space created between the element and the outline is completely transparent, allowing the background of the parent element to show through.

Negative Values

A negative length draws the outline inward, positioning it inside the element's perimeter.

.card {
  outline: 2px dashed #ffffff;
  outline-offset: -8px; /* Outline sits 8px inside the element */
}

If the negative offset is large enough, the outline can shrink toward the center of the element. If the offset exceeds half the element’s width or height, the outline will disappear entirely.

Key Behaviors and Characteristics

  • No Layout Impact: Changing the outline-offset never causes reflow or shifts neighboring DOM elements.
  • Transparent Gap: The offset area does not accept background colors directly; it reveals whatever lies beneath it in the stacking context.
  • Non-Conforming to Border Radius: In older specifications and some rendering engines, outlines do not reliably follow border-radius. However, modern browsers increasingly respect border radii when rendering outlines and offsets.

Common Use Cases

  1. Enhanced Accessibility: The most common use case is improving keyboard focus states. Adding outline-offset: 2px or 3px to interactive elements (such as links, inputs, and buttons) ensures that the focus ring does not clash with the element's border or text.
  2. Double-Border and Inset Effects: By combining a solid border with a negative outline-offset, you can easily create sophisticated photo frames, decorative card borders, or ticket-style designs with minimal markup.