Codectionary / Developer documentation / CSS

Outlines without Layout Changes

An outline is drawn around an element without taking up layout space like a border. outline-offset moves it away from the edge. It is particularly useful for visible keyboard focus because adding it does not shift neighboring content.

Syntax

button:focus-visible { outline: 3px solid; outline-offset: 3px; }

Examples

Outlines without Layout Changes: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

button { padding: .75rem 1rem; margin: .5rem; }
button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 4px; }
  1. Expected result: Tabbing between buttons shows an offset blue outline without moving either button.
  2. Outlines are painted outside ordinary box sizing.
  3. focus-visible lets the browser choose when a visible focus cue is appropriate.
HTML used by this example

<button>First action</button> <button>Second action</button>

Best practices

  • Never remove default focus indicators without an equally visible replacement.
  • Check clipping ancestors so outlines are not cut off.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading