# 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.
```html
Custom focus ring
```
## Customize
Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles.
### CSS variables
Modify the `--cui-focus-ring-*` CSS variables as needed to change the default appearance.
```html
Green focus ring
```
`.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.
```scss
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
--#{$prefix}focus-ring-blur: #{$focus-ring-blur};
```
By default, there is no `--cui-focus-ring-x`, `--cui-focus-ring-y`, or `--cui-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values. Modify them to change the default appearance.
```html
Blurry offset focus ring
```
### Sass variables
Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.
```scss
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: rgba($primary, $focus-ring-opacity);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
```
### Sass utilities API
In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors](/customize/color/#theme-colors). Note that the light and dark variants may not be visible on all background colors given current color mode support.
```html
Primary focus
Secondary focus
Success focus
Danger focus
Warning focus
Info focus
```
Focus ring utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.](/utilities/api/#using-the-api)
```scss
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$prefix", "$key", "focus-ring")
),
```