Very often we useoutline: 0 to remove the effect of focusing on an element. This, which initially prevents a border from wrapping around it when you click/touch on it, means thatusers navigating using the keyboard don't have a visual indicator of which element has focus. And we know thatevery interactive element needs a focus indicator.

Therefore, it is recommended to address this problem using some of these solutions:

1. Styleoutline property

Use CSS to give the outline the effect you want, for example:

button:focus {  outline: 4px dashed black;}

2. Style element itself

Remove the outline but design other styles for the focused element, using the CSS properties that suit you best:border,background-color,text-decoration,color... In case you choose this option, it is important to be carefulnot to use the color as the only element to provide information about the focus, since there may be colorblind people who are not able to distinguish between the normal state and the focus state.

button:focus {  outline: none;  /* any accessible style you want here */}

3. Remove outline for mouse users only

Since the problem occurs when mouse users click/touch on an interactive element, it seems best to remove the outline for these users only. Luckily we have a well-supported CSS pseudo-class at our disposal that allows us to do something like this::focus-within.

Withgood browser support we can now do something like whatLea Vérou proposes.

button:focus:not(:focus-visible) {  outline:none;}

This way weonly remove the outline for users clicking/touching the element, and we can complete our styles using the same pseudo-class for keyboard navigation:

button:focus-visible {  outline: 4px dashed black;}

There are very good articles on this subject byChris Coyier andPatrick H. Lauke.