What is the difference between outline and border?

Outline doesn't affect element size or layout. Border adds to the element's box model dimensions. Outline sits outside the border and is primarily used for focus indicators.

How do I make accessible focus styles?

Use :focus-visible with a visible outline (at least 2px) that contrasts against the background. Add outline-offset for spacing. Never remove the outline without providing an equally visible alternative.

Why use :focus-visible instead of :focus?

focus-visible only shows the focus indicator for keyboard navigation, not mouse clicks. This gives keyboard users the indicator they need without adding visual noise for mouse users.

How to Create CSS Outlines and Focus Styles

🔲

Try CSS Outline Generator

Free, no signup →