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