Remove Blue Outlines from Links in Chrome & Firefox

Are you getting blue borders around links, inputs, or buttons in the Chrome browser? Or a dotted border in Firefox browsers?

To fix this, youll need to add the outline: none; style to a :focus selector for any element that shows the problem.

Heres some CSS that will remove any blue borders around elements that are in a focused state:

a:focus,
button:focus,
input:focus,
:focus {
  outline: none;
}

Adding that CSS code should fix most of your issues in both Firefox and Chrome. The :focus selector by itself will apply that style to all elements in its jurisdiction.

If you still notice problems in Firefox, you can use the ::-moz-focus-inner selector to fix any dotted blue lines. Here is what the code looks like:

a::-moz-focus-inner,
button::-moz-focus-inner,
input::-moz-focus-inner,
::-moz-focus-inner {
  border: 0;
}

To really cover your bases, we suggest that you put the code below in your base CSS file that applies to your whole project:

:focus {
  outline: none;
}

::-moz-focus-inner {
  border: 0;
}

This should remove any blue outlines across all the HTML elements on your site!