:focus-visible
Focus Ring (:focus-visible)
/ :focus-visible · :focus /
also called focus indicator, keyboard focus outline, focus halo
A focus ring identifies the element that will receive the next keyboard action. The :focus pseudo-class matches any focused element, while :focus-visible lets the browser show the strong indicator when the input modality or control needs it, most notably during keyboard navigation. Never remove the default outline without supplying an equally visible replacement.
If you called it…
…you meant a focus ring (:focus-visible).
Anatomy — every part, named
- 1Focus outline
outline“The blue line around the button after I press Tab” is the focus outline.
- 2Outline offset
outline-offset“The little gap between the control and its focus line” is the outline offset.
Prompt — paste into your agent
Style the keyboard focus ring with :focus-visible instead of suppressing the browser outline globally. Make it high contrast and clearly offset from the control; use :focus only for state that must apply regardless of whether focus came from keyboard or pointer.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my focus ring (outline, :focus-visible). Rule out: a global outline:none killing keyboard navigation everywhere; :focus styling mouse clicks when :focus-visible was intended; the ring clipped by an overflow-hidden ancestor — use outline-offset or box-shadow inside; a box-shadow ring invisible against a same-color background; programmatic .focus() not showing a ring without focus-visible options. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | :focus-visible | |
| CSS | :focus | |
| HTML | tabindex |