outline-offset
Setting the spacing between an outline and the border of an element.
Overview
| Class | Declarations |
|---|---|
outline-offset:<offset> | outline-offset: <offset>;
|
Examples
Move an outline away from the element
A positive outline-offset leaves a gap outside the element’s border edge. Compare zero offset with 0.5rem (8px at this preview’s root size).
<!-- Zero offset · at the border edge --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm outline:2px|solid|var(--color-blue) outline-offset:0 font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Preview details</button><!-- 2x offset · 8px gap --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm outline:2px|solid|var(--color-blue) outline-offset:0.5rem font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Preview details</button>Generated CSS
@layer utilities { .outline-offset\:0\.5rem { outline-offset: 0.5rem }}Offset changes paint placement without changing the layout box. Leave room around the control so an outward ring remains visible.
Pull an outline inward
A negative offset moves the ring inside the border edge. Compare zero with −4px; the buttons retain the same dimensions and padding.
<!-- Zero offset --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm outline:2px|solid|var(--color-blue) outline-offset:0 font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Preview details</button><!-- −4px offset · inside the edge --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm outline:2px|solid|var(--color-blue) outline-offset:-4px font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Preview details</button>Keep the inward ring away from text and icons. Negative offsets do not reserve extra content space.
Apply conditionally
Keyboard focus moves the blue outline outward by 0.5rem. Print returns the offset to zero; the outline itself remains visible.
<!-- Zero → 2x on keyboard focus --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm outline:2px|solid|var(--color-blue) outline-offset:0 font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible outline-offset:0@print outline-offset:0.5rem:focus-visible@screen"> Preview details</button>The gap is independent of outline width and style. The live size reading stays unchanged while the offset changes.