Scroll to top
Here’s a quick CSS tip. Firefox likes to put a dotted border around any links that you click as shown below, but there’s an easy way to fix it simply add the code below to your ‘a tag’ style either in the head of the page on in an external style sheet.
a{ outline: none;
-moz-outline-style: none;
}
you can use only
outline: none;
instead of mozilla’s property. Firefox understands “outline” too
Shogun says: These details make a big difference, thank you!
Michael T says: i’ve been using a:focus { outline: none; } in the sties i’m doing.
From a usability perspective: don’t use this! If people like to use their keyboard to navigate through your site, you’ve just succesfully removed their visual hint of which link is currently ‘active’ and ready to be ‘clicked’.
@libeco thanks for the comment, I totally understand where your coming from, however its a small percentage of users that are going to be browsing your site with just their keyboard, plus this is specific to Firefox which still has a small browser market share, all other browsers don’t have this problem / feature. 
Designer and web developer, Co-founder and Technical Director at Harkable.com London. Previously I worked at InMobi, Spotify and MySpace. Interests include photography and making short videos. Also an avid F1 fan.
Follow us on Twitter and get in-stream updates.
Subscribe to all the Papermashup tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.
5 discussions around Remove the dotted border around links in Firefox