Maledetto Outline

Come eliminare l’outline di default su Chrome e Firefox:


a { outline: none; }


What does the outline property do?

It provides visual feedback for links that have “focus” when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can’t use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.

Defining focus to navigation elements is an accessibility requirement, it’s clearly stated in the Web Content Accessibility Guidelines:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Why do some web designers remove it?

Usually “design vanity” or total ignorance of accessibility.

Many designers use CSS resets which include styling that removes the outline. One of these is Eric Meyers well known CSS Reset, but Eric makes it perfectly clear that users should redefine focus styles.

/* remember to define focus styles! */
:focus {
outline: 0;

Notice the bit that says “remember to define focus styles!” – ignorance is no excuse.

If you must remove it, provide alternative styling

There’s no real reason to remove the outline, but if your life depends on it there are a number of alternative methods to style links that are in focus, use your TAB key to see the test link anchors in action:

Further reading

Have you written about this problem? Let us know and we’ll consider adding your article/post link here – outlines +

If you care about accessibility help spread the word and link to

Thanks to Roger Johansson of 456 Berea Street who was the inspiration for this site.


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 propertyOutlineis 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!


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" />