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
november 2, 2008
We can use this code too
a {
outline: none
}
juli 10, 2009
An extremely simple fix for a very bothersome visual effect.
This is exactly what I was looking for.
oktober 26, 2009
Thanks, this is what I needed! Well, actually to make div borders disappear – but it was a slight tweak:
div {
outline: 0;
}
november 5, 2009
Thanks Isaac, this was really useful. I also used it for divs and objects (there was a horrible white dotted line around my embedded flash).
Thanks again,
Ash!