How To Disable the Dotted Border Around Clicked Text Links

css_outline-facebook.png

Part 1 out of 2(Part 2)

The CSS property “outline: Xpx;” is often overlooked. The only times you see it is when you’ve just clicked a link, as a thin dotted border. (See screenshot above!) It is enabled by the pseudo class :active by default for all anchors (<a>) in your HMTL document. It’s a usability thing, a confirmation that you’ve clicked a link. It also helps the page seem less flat, since a style change when you’ve just clicked a link gives you the feeling of pressing a button.

This blog post is two fold: First, I want to show you how to disable the border. On most modern web pages it is not needed, since we use hover effects, and in many cases graphical buttons to navigate.

Disabling the outline is really easy. You just need to make sure no anchors in your CSS document have that rule any more. All you do is add this to your stylesheet:

a {
outline: 0;
}

NOTE: No version of Internet Explorer supports this, even IE7 still displays the outline even if you have the above rule in your stylesheet.

Stay tuned for more info about this lost CSS property.

4 comments

  1. Thanks, this is what I needed! Well, actually to make div borders disappear – but it was a slight tweak:

    div {
    outline: 0;
    }

Leave a Reply