Removing the Flash, Image, Anchor, Etc. Dotted Outline

24 May 2009 Ferado

Ever have that annoying dotted outline around your flash or image? You know, the one around your anchor links that you ignore most of the time…ever have someone tell you to take it off and not know how?

It happens to the best of us. It’s the annoying dotted outline (dotted line) that we don’t even think about until we have to launch a product.

What does the dotted outline look like?

Just so we’re clear about what the dotted outline looks like, here’s an example:

Dotted Outline

The Solution

And now, here’s how you’re going to get rid of it for your flash piece:
[cc lang=”css”]
object {
outline: none;
}
[/cc]

That’s it! It’s just that simple. But what about image links? Or regular links?

[cc lang=”css”]
a {
outline: none;
}
[/cc]

Normally you don’t want to get rid of it for every element for every page. But if you do, here:

[cc lang=”css”]
:focus, :active {
outline: none;
}
[/cc]

The dotted outline is there for usability. People that don’t have access to a mouse (I’m sorry guys/girls) for some reason or another would use their keyboards to navigate your pages. They would love to have that visual indicator, the dotted outline, to navigate the page(s) more easily.

For more information, please visit w3.org.

This reminds me of that old saying in Spiderman, “With great power there must also come – great responsibility!”

Use responsibly folks.