PLAY CSS
jaen

Border

outline-offset

outline-offset sets how far from the outer edge of the border an outline is drawn. Negative values pull it inside the element.

Syntax

<length>

Preview

Presets
Drag the bottom-right corner to resize

Code

.box {
  border: 6px solid #88d1c7;
  outline: 4px solid #4a86cb;
  outline-offset: 12px;
}

Controls

outline-offset12px

About

Where it is measured from

With the initial 0, the outline sits right against the outside of the border. Positive values move it outward, and negative values move it inward over the border and padding. Only lengths are allowed, not %.

Like the outline itself, it doesn’t affect layout. Even a large offset leaves the element’s size and its neighbors in place, and the outline is drawn over neighboring elements.

Common use

It is often used to move the focus ring of keyboard-selected elements a little away from them (:focus-visible { outline: 2px solid; outline-offset: 2px }). The gap between the ring and the element makes it stand out even on elements with a background color, like buttons.

Watch out

  • It is not part of the outline shorthand. Position is kept separate from appearance, so rewriting outline leaves outline-offset as it was.
  • However negative the value, browsers keep the outline’s outer width and height from going below twice the outline width (the spec says they should).
  • The preview here has a 4px outline plus a 6px border, so you can see where the offset is measured from.

References

MDN Web Docsoutline-offsetSpecificationCSS Basic User Interface Module Level 4Can I useoutline-offset

Comments

PLAY CSS