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!