CSS : How to remove Firefox's dotted outline on buttons and anchor tags

A quick tip to remove the focus outline in Firefox, that appears when a link or a button is clicked. The focus outline manifests as a grey dotted line around the object and is used as a visual clue for keyboard navigation

Warning : Why you should not remove the focus outline

The focus outline, while an eyesore, is used as a visual clue when a user navigates the web page using their keyboard instead of a mouse. Disabling this can cause accessibility issues for an user using their keyboard.

I personally recommend that when disabling the focus outline, a developer must provide alternate visual clues to support keyboard navigation. The following CSS code when added to your stylesheet will disable the dotted lines for anchor tags, buttons, file upload, select drop down, you can use the same selectors to provide alternate visual clues.

a:focus, a:active, 
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;

If you have any questions or concerns, please feel free to leave a comment.


Got something to say? Feel free, I want to hear from you! Leave a Comment

  1. Lucio says:

    Great, thanks!!!

  2. ankur saxena says:

    seriously thanks…… it,s working….

  3. Ran says:

    Just a thought.You can leave the links “as-is” to preserve keyboard navigation, but remove the dotted border from *clicked* links using this javascript:


Trackbacks for this post

  1. harvey

Leave a Comment

Let me know your thoughts on this post but remember to place nicely folks!