Skip to main content

Focus ring

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.

Result
Loading...
Live Editor
<a href="#" className="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 our CSS variables, Sass variables, utilities, or custom styles.

CSS variables​

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

Result
Loading...
Live Editor
<a
	href="#"
	className="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2"
	style={{ '--bs-focus-ring-color': 'rgba(var(--bs-success-rgb), .25)' }}
>
	Green focus ring
</a>

.focus-ring sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts.

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.

Result
Loading...
Live Editor
<a
	href="#"
	className="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2"
	style={{
		'--bs-focus-ring-x': '10px',
		'--bs-focus-ring-y': '10px',
		'--bs-focus-ring-blur': '4px',
	}}
>
	Blurry offset focus ring
</a>