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, you'll need to add the outline: none; style to a :focus selector for any element that shows the problem.
Here's some CSS that will remove any blue borders around elements that are in a focused state:
CSS
 
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:
CSS
 
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:
CSS
 
:focus {
  outline: none;
}
 
::-moz-focus-inner {
  border: 0;
}
This will remove any blue outlines across all the HTML elements on your site!
Hopefully, this was helpful and fixed your issue! And as always, happy coding!
Have any questions or comments about this article? You can contact me via email at nick@coderrocketfuel.com or on Twitter at @CoderRocketFuel.
If you enjoyed this free content, please consider supporting what I do by Buying Me a Coffee.