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 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!