Focus ring

Example #

The .focus-ring helper class 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.

Click directly on the link below (styled as a card) to see the focus ring in action, or into the example below and then press tab to focus with your keyboard.

<!-- Focus ring -->
<a href="#" class="focus-ring">...</a>

Customization #

You can modify the --bs-focus-ring-* CSS variables as needed to change the default appearance. For example, here's one modified to use the info color.

<!-- Info focus ring -->
<a href="#" class="focus-ring" style="--bs-focus-ring-color: hsla(var(--bs-info-hsl), 0.25);">...</a>

The .focus-ring class sets styles via global CSS variables that can be overridden on any parent element, as shown above. By default, there is no --bs-focus-ring-x, --bs-focus-ring-y, or --bs-focus-ring-blur, but we provide CSS variables with fallbacks to initial 0 values. Modify them to change the default appearance.

<!-- Blurry focus ring -->
<a href="#" class="focus-ring" style="--bs-focus-ring-x: 8px; --bs-focus-ring-y: 8px; --bs-focus-ring-blur: 2px;">...</a>

Utilities #

In addition to .focus-ring, you can also use .focus-ring-{color} utilities to modify the helper class defaults. The {color} can be primary, secondary, success, danger, warning, info, light, or dark. Note that the light and dark variants may not be visible on all background colors given current color mode support.

<!-- Warning focus ring -->
<a href="#" class="focus-ring focus-ring-warning">...</a>

<!-- Info focus ring -->
<a href="#" class="focus-ring focus-ring-info">...</a>

Please note, in the above example, the color and background-color has been changed by using the color and background helpers.