a { outline: none; }

Don't do it!

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 + outlinenone.com

If you care about accessibility help spread the word and link to http://www.outlinenone.com/

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