CSS outline-offset Property

The outline-offset property shifts an element's outline away from or toward the element's border edge, creating a visible gap (or overlap) between the outline and the element itself. Because outlines are painted outside the element's box and do not contribute to the box model, adjusting that offset changes only the visual spacing; it does not affect layout, element size, or document flow. This makes the property particularly useful when you need decorative or accessibility-focused indicators that must remain visually distinct without altering surrounding layout.

You can use outline-offset together with the element's outline settings to control how that indicator sits relative to borders and adjacent content. It complements the element's outline (which controls the outline’s style, color and width) and the element's border (which is part of the box model). Keep in mind that outlines are painted and composited differently than borders and shadows: they may be clipped by container clipping and can render in subtly different ways across implementations, so visual testing in context is recommended.

Practically, designers rely on outline-offset for clearer focus rings and layered effects - letting a focus outline sit outside an existing border or move closer to the element for tighter highlighting - without causing reflow. If you need a softer, blurred, or inset effect that interacts with stacking and painting differently, consider using box-shadow instead. Also be mindful that outlines are painted over nearby content when they extend beyond the element, so choose offsets carefully to avoid unintended overlaps.