Return of CSS Outline
Morgan Murrah
An example input that has keyboard focus and that has a nice blue outline around it.
This is basically how it should be, and could look very differently, but it is important that it is there
Outlines around focused elements such as buttons and inputs are important for keyboard users and people with different vision levels to use your websites. Since 2022 there is little excuse to properly set these up, but there is a long history of issues with outlines in the web and not every resource explains the issue.
People who particularly rely on keyboard access and visual cues may not be able to see what is in focus without an outline. It may be uncomfortable, or not usable at all. I use my keyboard as a first preference and like to see the outline, it is a preference for me and a need for some.
Unfortunately, with a long history going back to 2008 or earlier, some developers and designers thought it was a good idea to set outline CSS to 0. Maybe they thought it cluttered the UI, or they didnt like the default and intended to change it later (but this evidently did not always happen).
In one notable example, a historically good contribution of a CSS reset set outline to 0 with a comment to change it to match styling. This is understandable, but not optimal, as many will never change such a default.
It seems simple, yet a lot of sites in 2026 are still retaining the practice of keeping outlines to 0 and I encountered one recently. They may be installing from starter projects with CSS code that removes the outline without much thought, or see it as a common default.
Since 2022, there are a lot more styling options to make your outlines even better to fit your layout or design without the issues of clunky outlines that are not intended. This is particularly with the usage of :focus-visible which applies heuristics to determine if focus should be visible.
Set an outline to something visible today. Check out focus-visible:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible
Check out the WCAG success criteria supporting this: https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html
There are some other good blogs on this: https://eevis.codes/blog/2022-07-28/dont-set-outline-0-or-outline-none-for-focus/
You can try searching on a site you use and raise a Github issue or a report or bug if there are no outlines. In 2026, there is little excuse to implement this at all anymore, not even “it looks wrong” like pure :focus may have had some issues in the day.
Return the Outline!