Custom CSS outlines

Do not rely on the browser’s default outlines because:

  • They change unpredictably
  • They usually “sink in” instead of popping out
  • They are not visually striking

Outlines must stand out as much as possible. I test them by focusing an element and taking a step back from the monitor. If I can see which element is being selected from that distance, that means the outline is sufficient.

As for thickness, 3 - 4px is enough. Any thinner, and it will be difficult to distinguish.

As for the color, go to the other side of the color wheel, preferably a color missing from your style guide to avoid clashes.

And most importantly, before launch, make sure to manually check each interactive element. You never know which one might clash with the outline.

Don’t forget the linked icons. They are just graphic links, so it is vital that they be outlined on focus.