Remove Dotted Outlines

We’ve all seen the dotted lines around anchor links, and we know that they are there for a reason, but for the majority of us, we do not want them there. This snippet will show you how to remove them for your webpages. Please keep in mind that the dotted lines are there for accessibility, they are a visual indicator to know which link has the focus.

To remove the dotted lines, we are going to use the css outline property. The code we need to use can be seen below.

a, a:active, a:focus {
   outline: none; 
}
/* Sometimes you may need to use !important */

The above code will remove all elements of the dotted line on anchor links, including when the link is active and when it has focus.

If however, you would prefer that the link still has the dotted line when it has the focus, for users that like to use their keyboard for navigation, you can then use the following css code.

a:active, {
   outline: none; 
}

If you are going to use the above techniques, please do keep in mind why they are there in the first place, as mentioned above.