1. Docs
2. Helpers
3. Focus Ring

Focus Ring

Add a consistent, accessible focus ring to any element with .velin-focus-ring. Customize the color, width, and offset via CSS custom properties.

Default focus ring

Tab to the element below to see the focus ring in action.

<a href="#" class="velin-focus-ring">Focus me</a>

Custom color

Override --velin-focus-ring-color to change the ring color.

<a href="#" class="velin-focus-ring"
   style="--velin-focus-ring-color: rgba(220, 53, 69, .5)">
  Danger ring
</a>

<a href="#" class="velin-focus-ring"
   style="--velin-focus-ring-color: rgba(25, 135, 84, .5)">
  Success ring
</a>

CSS Variables

.velin-focus-ring {
  --velin-focus-ring-color: rgba(13, 110, 253, .25);
  --velin-focus-ring-width: 0.25rem;
  --velin-focus-ring-offset: 0;
}