🎨CSS & Color

Accessible Focus Rings

Clearly visible focus states for keyboard navigation.

Explanation

Focus rings are essential for users who navigate the web using a keyboard or switch device.

Examples

Standard Ring
Output
outline: 2px solid indigo-500, offset: 2px

Code Examples

CSS 
button:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 4px;
}

Try it Now

Open in Focus Rings

💡 Tips

  • Use :focus-visible to only show the ring to keyboard users
  • An outline-offset makes the ring easier to see
  • Don't rely on color alone; use a thick border or outline

⚠️ Common Pitfalls

  • outline: none is an accessibility failure
← Back to All Templates