Accessibility outlines on Firefox, Edge, Chrome and Safari.

How to remove the blue border/outline in Chrome & Safari, and dotted line in Firefox & Edge without effin’ up the UX

There’s another article here on Medium that appears in Google’s results (4th place as of 4/8/19) about removing the blue border in Chrome and dash border in Firefox for Bootstrap 3, and also suggests to use the !important directive.

So I’m creating THIS article to make things simpler and recommend best practices.

Remove blue border/dotted line:

outline: none;

Example:

a { outline: none; }

That’s it.

…is it?

Don’t slap the users please!

Removing the blue border/dotted line from interactive HTML elements is a HUGE accessibility no-no = slapping the user in their faces.

BUT, we can still get rid of those ugly blue borders/dotted lines and show respect for our users: restyle to still provide a visual cue.

This works in any interactive HTML element (link, buttons, inputs, etc.). Let’s stick with the anchor links.

Add styles for other states after removing the outline:

a, a:visited { outline: none; }
a:hover,
a:active,
a:focus {
  /*Edit at will*/
  background: #ccc;  
}

…aaaand that’s it.

Here’s demo in CodePen to get you started: https://codepen.io/anon/pen/axBjdm

—

Don’t forget to share, and Applaud the article too please 😁.

Now go remove those pesky blue borders and dotted lines!

Thank you,

Ricardo Zea.