Styla saysoutline draws a line outside the border that doesn’t affect layout — key for focus rings.
outline looks like a border but sits outside it and takes up no space, so it never shifts layout. Its main job is the keyboard focus ring. Never remove focus outlines without providing a visible replacement — that locks out keyboard users. Use outline-offset to push it out.
Power-ups you unlock
outline draws outside the border, no layout shift
It is the keyboard focus indicator
Never remove focus styling without a replacement
outline-offset spaces it from the edge
The Specificity Sphinx attacks — common mistakes
outline:none with no replacement (accessibility failure)
Confusing outline with border (outline takes no space)
Forgetting outline ignores border-radius in old browsers
Boss battleStyle a custom :focus-visible outline on a button so keyboard focus is obvious.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>button{font:inherit;padding:10px 18px}button:focus-visible{outline:3px solid #8aff9d;outline-offset:2px}</style></head><body style="background:#06040d;padding:20px"><button>tab to me</button></body></html>