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

Press Tab to focus the button — the ring appears on :focus-visible only (not on mouse click).

<button type="button" class="velin-btn velin-btn--outline velin-focus-ring">Focus me</button>

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;
}