Removing The Dotted Outline

Anchor links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility. For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active (so, for example, they can press enter to navigate to that link).

You can try it for yourself by clicking on a link and mousing off of that link before letting go. Or, turn on the “Always use the cursor keys to navigate within page” preference, navigate the cursor around, and see the links become outlined.

Usually, this default styling isn’t a big deal. Links are normally active for only a split second before a new page is loaded and the outline is gone. However, there are circumstances where you want to remove this outline.

Bear in mind that this styling literally uses the “outline” CSS property. Outline is very similar to the “border“ property, with two important differences. One, outline goes around the entire object (much like using just “border”), but you may not be specific about sides. “Outline-left” does not exist. Two, the outline value is not a part of the box model. Border is calculated into the total width of the box, whereas outline is not. This is important so that layouts don’t get bumped around when the outline is applied and removed.

How to remove it

If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset:

a {
   outline: 0;
}

In general, I recommend just leaving the default outline styling active, but there are a few circumstances where it is quite annoying and should be turned off. For one, if you have a page element that is using large amounts of padding (like for positioning) or is floated, these outlines can be very weirdly placed or even stretch the entire width of the screen. Just looks bad. Another scenario is if you steal away the “click” event from an anchor link for another purpose (like, to activate some JavaScript magics). That click will no longer be loading a new page, so the outline will become active and stay that way until you click away somewhere else, much uglier than the just quick and temporary view of it you normally get when clicking a link.

Make sure to add in new focus styles

Because that outline was providing an important accessibility feature, you should really (really) consider adding back in a style for your links focus and active states. Personally, I just like to make them the same as the hover state. It’s about the same thing, as far as actual function. Whatever your hover state is, even if it’s shifting a background image or changing size or whatever, it can be joined with the active and focus states. Like so:

a:hover, a:active, a:focus {
  /* styling for any way a link is about to be used */
}

Wow. I really intended this article to be like 3 sentences long and 1 clip of code. Things are never quite as simple as I want them to be!

Flash

If you are having trouble with this dotted out line on a Flash object/embed, you can:

object, embed { 
  outline: 0;
}

Firefox Inputs

Clicking down on an input type=image can produce a dotted outline (Does this in Firefox 3.6.8 but not Firefox 4). To remove it:

input::-moz-focus-inner { 
  border: 0; 
}

IE 9

George Langley wrote in to say that IE 9 apparently doesn’t allow you to remove the dotted outline around links unless you include this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9" />