outline-offset

Setting the spacing between an outline and the border of an element.

Overview

Examples

Move an outline away from the element

Use outline-offset:* to create space between an outline and the element edge.

<button class="outline:2px|solid|blue-60 outline-offset:2x">    Save</button>

@layer utilities {    .outline-offset\:2x {        outline-offset: 0.5rem    }}

Pull an outline inward

Negative values can pull the outline inside the element edge.

<button class="outline-offset:-1px">...</button>

Use inward offsets carefully so the focus indicator remains visible.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="outline-offset:0 outline-offset:2x:focus outline-offset:0@print">...</div>

Offset changes only matter when an outline is visible.