DEV Community

Discussion on: 5 CSS interview questions one should know [part 2]

Collapse
 
facundocorradini profile image
Facundo Corradini

outline: none gets rid of the visual indication of focus, which would be terrible for keyboard navigation users, as they would have no indication of where they're positioned at.

The rule of thumb is "never use outline: none", so the browser's default focus states stays active. But we can use outline: none if we replace it with something else.
For instance, outlines are always square, which can look awful in buttons with rounded corners. So we can style our buttons' focus state with outline: none, providing an alternate indication such as a solid box-shadow instead. That way our focus indicator would follow the button's rounded corners.

Here's a great video about that:
youtube.com/watch?v=Mvu5OMGcdVA

Collapse
 
hibritusta profile image
Hibrit Usta

Understood. Thanks for resource sharing
Facundo Corradini.