Remove Dotted Link Borders in Firefox

When you use a HTML link (“<a>” tag) to implement a drop-down list or menu, you’ll notice that there are annoying dotted borders around the link after it’s clicked in Firefox. We can just ignore this for most of the times but sometimes it affects the look and feel of the site. Two screen shots from Youtube and Yahoo!:

Youtube link border example      Yahoo link border

This can be even worse (Digg front page):

Digg Link Border

OK. This is fake :) . Digg did a perfect drop-down menu, though they’re ignoring something. I removed some CSS rules using Firebug and got this effect. It’s ugly, isn’t it?

The Cause

When a link is clicked, it gets the focus. Firefox adds dotted borders to links that have focus to remind the users.

The Solution

To avoid the border, add this CSS rule to your page:

a {
outline: none;
}

This piece of code is similar to the code I removed from Digg to get the screen shot above.

In fact this is a common problem asked by many developers. For more information, search for “firefox link border“. Many authors wrote good articles on this topic.

Update – This can be seen on every WordPress blog login page (click to enlarge):

WordPress login

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove your intelligence before hitting * Time limit is exhausted. Please reload CAPTCHA.