Focus ring
Utility classes that allows you to add and modify custom focus ring styles to elements and components.
The .focus-ring helper removes the default outline on :focus,
replacing it with a box-shadow that can be more broadly customized. The new shadow is
made up of a series of CSS variables, inherited from the :root level, that can be
modified for any element or component.
Example
Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.
On this page