CSS outline-offset Property

Definition and Usage

The outline-offset property sets how far an outline sits from the element’s border edge. A positive length pushes the ring outward. A negative length pulls it inward. The gap is transparent, so the parent background shows through.

It is not part of the outline shorthand. You still need a visible outline (outline-style plus width/color). The initial value is 0. It does not change layout size.

CSS Syntax

Example: outline-offset: 4px; Percentages are not valid — use a length such as px, em, or rem.

Property Values

How to Use outline-offset

Draw an outline first, then add the gap you want between the border and the ring.

1. Set a visible outline with outline or style/width/color longhands.
2. Add outline-offset with a length (4px, 0.25em, …).
3. For focus UI, apply both under :focus or :focus-visible.
4. Keep enough space so the ring stays clear of text and icons.

Live Preview

Outline width, style, and color stay fixed. Change only outline-offset.

CSS Examples

Each snippet draws an outline first, then sets only the offset you are studying. Use Try It Yourself for a live editor.

<style>
  div {
    outline: 3px solid #2563eb;
    outline-offset: 8px;
    border: 1px solid #cbd5e1;
    padding: 12px;
  }
</style>

<div>8px gap</div>

<style>
  div {
    outline: 3px solid #2563eb;
    outline-offset: -6px;
    border: 1px solid #cbd5e1;
    padding: 16px;
  }
</style>

<div>Inset outline</div>

<style>
  button {
    outline: none;
  }
  button:focus {
    outline: 3px solid #d97706;
    outline-offset: 4px;
  }
</style>

<button type="button">Tab to focus</button>

Key Takeaways