Helpers

Focus ring

Utility classes that allows you to add and modify custom focus ring styles to elements and components.

On this page

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 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.

Custom focus ring

<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  Custom focus ring
</a>

Customize#

Modify the styling of a focus ring with CSS variables, utilities, or custom styles.

CSS variables#

Modify the --focus-ring-* CSS variables as needed to change the default appearance.

Green focus ring

<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--focus-ring-color: color-mix(in srgb, var(--success) 25%, transparent)">
  Green focus ring
</a>

.focus-ring reads these variables, which can be set on the element or on any parent element:

--focus-ring-color, defaults to var(--focus), the half-transparent primary used by all focus states
--focus-ring-width, defaults to .25rem
--focus-ring-x, --focus-ring-y and --focus-ring-blur, all defaulting to 0

Modify the offset and blur to change the default appearance.

Blurry offset focus ring

<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--focus-ring-x: 10px; --focus-ring-y: 10px; --focus-ring-blur: 4px">
  Blurry offset focus ring
</a>

Utilities#

In addition to .focus-ring, there are several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of the theme colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.

<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>