Accessible Focus Ring

Preview

Tailwind Classes

focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2

CSS Code

.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #3b82f6;
}

HTML Example

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Focus Me (Tab key)
</button>

Use Cases

Browser Support

All modern browsers