Firefox places a border around links, buttons and other focus-able elements. The purpose of this is to visually mark the focused element, this is useful when using the “tab” key to go through navigational items. However on a nicely designed page it just looks plain ugly. Trying to get rid of Firefox dotted line can sometimes be tricky. If you encounter this for the first time you might have a harder time figuring out how to get rid of the Firefox dotted line. The following lines did the trick for me.

a:hover, a:active, a:focus, a:link, a:visited {
  outline: 0;
  outline: 0 !important;
  outline-style:none;
}
button, object, embed { 
  outline: 0;
}

/* All Input elements */
input::-moz-focus-inner { 
 outline: 0; 
}

/* Or more specifically*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner{
  outline: 0;
}

 

The question how to get rid of Firefox dotted line has been raised on the Mozilla support forum and Stack overflow, check out their answers as well.

Please let me know if this article helped you, share your thoughts in the comment section below, and help me improve this article.