Prevent dotted border from appearing when clicking links in Firefox

Posted September 12th, 2009 in HTML and CSS

The other day I wrote about how to do an animated information box with jQuery and in doing so was reminded of an annoying habit Firefox has of putting a dotted outline around links when they're clicked. This post shows the simple solution to this problem.

Screenshot of the problem

The following screenshot shows what I'm talking about after clicking the Example 3 link in Firefox. For the purposes of the example I switched off the border on the links so it's easier to see the dotted outline. Because clicking the link does not navigate away from the page, the link remains dotted and is, in my opinion, a bit ugly.

The solution

To prevent this behavior for all <a> tags, add the following to your style sheet:

a:focus {
    outline: 0;
}

You can alternatively just apply it to a particular div etc like so, where #example is the element that contains <a> tags that should not have the outline.

#example a:focus {
    outline: 0;
}