Why your focus outline disappeared — 4 causes and how to bring it back

You press Tab — and can't tell where you are. Buttons don't light up, links don't get an outline, fields all look the same. The page seems to ignore the keyboard, even though focus is dutifully moving through it.

First, let's rule out what isn't a bug. You clicked a button with the mouse and there's no outline? That's by design. Browsers draw the focus ring by their own logic: when navigating with the keyboard — yes; when clicking a button with the mouse — usually not. In a text field the outline always shows: that's where you type.

But if there's no outline when you press Tab, something's broken. For someone without a mouse, the focus outline is what the cursor is for you. WCAG success criterion 2.4.7, level AA, requires focus to be visible when using a keyboard. Here are four causes, starting with the most common.

Cause 1. Someone wrote outline: none

The browser draws the focus outline with the outline property. Write outline: none or outline: 0 anywhere — and it's gone. MDN puts it bluntly: if you remove the default outline, you must provide your own, visible one.

Where it usually hides:

• a CSS reset from a template: *:focus { outline: none; };
• a rule like button { outline: 0; } "to get rid of the ugly border";
• the Tailwind class outline-none or focus:outline-none in generated code.

How to check. Open Chrome DevTools and select a button. In the Styles pane, click :hov and tick the :focus-visible state. Now you can see which rule kills the outline.

How to fix. Don't delete the rule blindly — replace it with your own outline:

:focus-visible {
  outline: 3px solid #d4a373;
  outline-offset: 2px;
}

:focus-visible only kicks in when an outline is actually needed — just like the browser default. A mouse click won't trigger it; Tab will.

If you're on Tailwind v4, note: there outline-none removes the outline completely, while outline-hidden hides it but keeps it in Windows high contrast mode. You can add your own outline with focus-visible:outline-2 focus-visible:outline-offset-2. How Tailwind differs from plain CSS is in Tailwind vs CSS.

Cause 2. A parent clips the outline

outline is drawn outside the element. If a container has overflow: hidden, anything past its edges gets cut off. Cards, carousels, horizontal lists and rounded blocks suffer most.

How to check. The outline is only partly visible: one or two sides vanish on the edge items. Or middle items have it, while the first and last don't.

How to fix. Two options:

• draw the outline inside the element: outline-offset: -3px;
• give the container some padding so the outline has room.

Cause 3. The element slid under a sticky header

The outline is there, but you can't see it — a header with position: sticky or fixed covers it from above. Or a cookie banner covers it from below. You press Tab, the page scrolls, and the focused link ends up right under the header.

This problem is common enough that WCAG 2.2 added a separate criterion, 2.4.11: a focused element must not be entirely hidden by content the site's author added. Sticky headers, footers and cookie banners are named as the main culprits.

How to check. Tab through a whole long page. Watch for moments when focus "disappears" briefly and reappears further down.

How to fix. Tell the browser the top is taken:

html { scroll-padding-top: 80px; }

Use your header's height. Now, when scrolling to focus, the browser leaves room at the top. For a cookie banner, WCAG suggests either making it modal so it's dismissed first, or offsetting it the same way with padding.

Cause 4. The outline is there but blends into the background

The browser's default outline is designed for a light page. On a dark theme, or on a button of the same color, it's easy to miss. MDN points to the contrast rule: a focus indicator needs at least a 3:1 contrast with its surroundings.

How to check. Press Tab across a dark section of the site and across colored buttons. Squint. If you have to hunt for the outline, that's it.

How to fix. Pick the outline color for the page background, not for the button, and push it away with outline-offset. Then a strip of background sits between button and outline, and the ring shows on any button. If your site has a dark theme, give the outline its own color there too — see how that works in the guide how to add dark mode.

Check your whole site in a minute

1. Take your hand off the mouse and Tab through the page from start to finish.
2. At every step, ask yourself: can I see where I am?
3. Pay special attention to card edges, the area under the header and dark blocks.

Focus is visible but jumps around in a strange order? That's a different story — tab order.

If you write code with AI, add a line to your prompt: "don't remove outline; give every interactive element a :focus-visible style with a high-contrast outline." Cause number one simply won't appear.

How do I hide the outline on mouse click but keep it for the keyboard?

Style :focus-visible instead of :focus. The browser decides when an outline is needed. It's supported in Chrome since version 86, Firefox since 85 and Safari since 15.4.

Can I use a shadow instead of outline?

It looks the same, but in Windows high contrast mode box-shadow is turned off — and the outline disappears again. If you want a shadow, keep a transparent outline alongside it: in that mode it becomes visible.