Using CSS :focus-visible to provide keyboard focus indication

In this example, we have a standard <button> control in the HTML.

By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using Tab.

In order to make this focus indication more prominent, we use the :focus-visible pseudo-class selector to define a more intentional and pronounced focus style.

:focus-visible { outline: 5px solid red; }