Sharpen Your Site by Removing Unwanted Link Border Outlines

Updated July 3, 2018 • 52 comments

Lately I have noticed several sites that display those unsightly dotted outlines on high-profile link elements. Typically, these link outlines plague various header elements such as banner images, navigational links, and other key features. This behavior frequently haunts highly graphical site designs and is often associated with various image replacement methods that position the original anchor text offscreen, generally far beyond the left edge of the browser window. When visible, such presentations display a ghastly, four-sided dotted border that wraps the linked element and then continues to stretch to the left-hand side of the browser window. To illustrate the phenomenon, I have collected some “real life” examples from around the Web..

Examples of unwanted link outlines

Here are a few examples of live websites demonstrating this distracting behavior BTW: no offense meant to any of these sites — they are all great — they just happen to serve as good examples of unwanted link border outlines..

Check out a Live Demo »

RudeWorks

GimmeSome Tune (at the Apple Store)

WordPress Login Screen (pre-2.5)

PhotoMatt (previous design)

GadgetTrak

Perishable Press (Jupiter Theme)

A plain and simple problem

The dotted outline/border issue demonstrated in each of these examples is an artifact of the browser’s (Firefox, in this case) default style for linked elements upon gaining focus. To see this effect, disable the stylesheet of any web page and tab through the links. As you navigate through the document, each focused link will appear surrounded on all four sides with a dotted border, according to the browser’s default styles.

With CSS applied, the outline border of indented, block-level links will surround both the linked element and the entire area between the block element and the browser window. Given that this behavior generally accompanies highly specific, rigorously designed header layouts, I am surprised that more designers don’t notice the issue (or simply don’t bother to fix it), especially given the ease of the solution..

A Quick and Easy Solution

Fortunately, the solution to this unwanted behavior resides in a simple bit of CSS. Depending on your design, there are different ways to approach the removal of unwanted outlines. If you are into CSS reset styles, then you may want to begin your design by neutralizing all focus outlines entirely:

* :focus { outline: 0; }

If you decide to reset all focus outlines in this way, remember to build them back up for usability purposes and according to your needs. Some sort of distinct, clear focus style is especially important for users that depend on tabbed browsing to navigate web documents.

If, on the other hand, you prefer to remove the focus border only for a single (problematic) element, replace the wildcard operator in the CSS rule above with something more specific. For example, if your markup looks like this:

<div id="header">
	<a href="http://domain.tld/" title="The swellest banner image of them all">
		<img src="http://domain.tld/path/image.png" alt="[ Something Swell ]" />
	</a>
</div>

..and you wanted to remove an unsightly focus border from the linked image, you could target that specific element and do the job like so:

div#header a:focus, div#header a:active { outline: 0; }

..or simply:

div#header a { outline: none; }

If you are also concerned with older versions of Firefox and Mozilla, you could nuke ‘em all with this outline-destroying death-blow:

div#header a:focus, div#header a:active {
	outline: 0 none;
	-moz-outline: 0 none;
	}

There are, of course, many ways to go about targeting specific elements and removing link outlines using CSS, however the point here is that it is a very simple thing to prevent those amateur-looking focus borders from stretching all the way across the screen, especially when the link itself constitutes some smaller, well-defined area.

CUL8R

Anyway, that’s a wrap for this fine CSS tutorial. Hopefully this information is helpful for those wanting to sharpen their site for the more critical visitors among us. As always, thank you for your generous attention!

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.

52 responses to “Sharpen Your Site by Removing Unwanted Link Border Outlines”

Eric 2008/06/10 4:29 pm

Most excellent tip. Those dotted outlines are really annoying sometimes.

I start out most of my sites with some form of reset. I will now be including * :focus { outline: 0; }
Thanks!
-Eric

Perishable 2008/06/10 10:09 pm • Post Author

My pleasure, Eric — thanks for the positive feedback! :)

RUDE 2008/06/10 11:00 pm

Hi man, thanks for using RUDEWORKS as an example.

I always make the same comment when I see articles that metion that “outline: 0” fix. In my case It should be ok to remove that focus lines (in fact, I use it for the search input, so Safari doesn’t show those ugly blue lines) but you should mention that those dotted lines are there for a reason: keyboard navigation.

I said that for RUDEWORKS should be ok to remove them because it’s your problem if you don’t use a mouse. But it could carry even legal problems if you remove that outline from institutional or government sites.

Great article btw ;-)

Perishable 2008/06/10 11:50 pm • Post Author

RUDE, your site rocks, man — no disrespect intended for using it as an example of hideous link outlines ;)

Good points about keyboard navigation. As mentioned in the article, global disabling of link outlines is acceptable so long as care is taken to rebuild key elements as necessary, according to the purposes of the design. For highly specific graphic/visual designs, where inherent CSS design knowledge is important, I think it might be a good idea to clean things up by removing those awkward, stretching link borders.

Thank God I don’t run a government site! ;)

Jordan Gray 2008/06/11 3:29 am

Those over-sized outlines were the bane of my life when I first discovered image replacement–nice article on removing them! I’m especially glad that you covered the need to replace them with something. Messing with a fairly fundamental UI behaviour is a powerful tool, and as we learned from Spiderman: With great power comes great responsibility.

The subtle highlight used on this site is nice. An alternative for the virtuously lazy is to remove outlines for the :active pseudoclass, and not :focus; this way, the outline won’t appear when you click on a link, but is still visible for those using keyboard navigation.

Ryan Williams 2008/06/11 4:49 am

Does this also work for Internet Explorer 6? I can’t really test it as the alpha build I’m using on Vista loves to crash when you drag whilst holding down the left mouse button.

And yes, care should always be taken when doing this. Doing it on text links and whatnot is usually fine as it just shows the other :active styling (eg: background colour, text colour) upon each tab, but images are more tricky.

Indeed, navigating between several button graphics as a top navigation could be almost impossible depending on how you implement the rollover/highlight effect. Pure CSS rollovers are obviously the answer here as they’ll make use of :active. And if you have no rollover/highlight effect at all… make one. ;)

Perishable 2008/06/14 9:23 am • Post Author

@Jordan: Certainly have to agree with the Spider-Man quote, especially where CSS and usability are concerned! Excellent tip about only removing the outlines for :active and not :focus. I will definitely be implementing that method in my next design. Thanks Jordan! :)

Perishable 2008/06/14 9:37 am • Post Author

@Ryan: No, I don’t think Internet Exploder supports the infamous CSS outline property. The good news is that IE8 will provide support for outline and a whole host of other CSS-2.1 properties. In the meantime, there are JavaScript methods for coercing pre-8 versions of IE to remove unwanted outline borders, but something tells me it just isn’t worth it.. ;)

Ken Westin 2008/06/18 6:26 pm

Hey thanks for using GadgetTrak.com as an example…heh wouldn’t have thought about trying to find a fix otherwise, just added your fix to the site.

Thanks

Ken Westin
GadgetTrak Founder/CEO/Chief Web Moneky

Perishable 2008/06/22 8:27 am • Post Author

Happy to help, Ken! Your site is looking much better! Also, thanks for all the work you do over at GadgetTrak.com. It’s an excellent service that is much-needed in today’s crazy klepto culture.
Regards,
Jeff

bez 2008/06/27 2:15 am

Hey,

thanks for the tip, great stuff!
though I have a “minor” issue
with ie6,
it seemed that these nasty
dotted lines are gone but the minute I tab my menu the lines
come back and stay there even
if I only click the mouse.

as long as I don’t tab they don’t
show up but the minute I do they come back.

I used this rule at the top of
my style sheet:

* :focus { outline: 0; }

it is only happening with ie6.
any ideas?

again thanks for this article!

Bez

Perishable 2008/06/29 2:00 pm • Post Author

Hi bez, unfortunately IE6 doesn’t support the outline property. As far as I know the only solution is to either use JavaScript to remove the outlines or else use a different method (i.e., no indent) for the link. For an excellent summary of nine(!) different image-replacement techniques, check out CSS Tricks excellent article, Nine Techniques for CSS Image Replacement (404 link removed 2014/03/26).

Comments are closed for this post. Something to add? Let me know.

Eric 2008/06/10 4:29 pm

Most excellent tip. Those dotted outlines are really annoying sometimes.

I start out most of my sites with some form of reset. I will now be including * :focus { outline: 0; }
Thanks!
-Eric
Perishable 2008/06/10 10:09 pm • Post Author

My pleasure, Eric — thanks for the positive feedback! :)
RUDE 2008/06/10 11:00 pm

Hi man, thanks for using RUDEWORKS as an example.

I always make the same comment when I see articles that metion that “outline: 0” fix. In my case It should be ok to remove that focus lines (in fact, I use it for the search input, so Safari doesn’t show those ugly blue lines) but you should mention that those dotted lines are there for a reason: keyboard navigation.

I said that for RUDEWORKS should be ok to remove them because it’s your problem if you don’t use a mouse. But it could carry even legal problems if you remove that outline from institutional or government sites.

Great article btw ;-)
Perishable 2008/06/10 11:50 pm • Post Author

RUDE, your site rocks, man — no disrespect intended for using it as an example of hideous link outlines ;)

Good points about keyboard navigation. As mentioned in the article, global disabling of link outlines is acceptable so long as care is taken to rebuild key elements as necessary, according to the purposes of the design. For highly specific graphic/visual designs, where inherent CSS design knowledge is important, I think it might be a good idea to clean things up by removing those awkward, stretching link borders.

Thank God I don’t run a government site! ;)
Jordan Gray 2008/06/11 3:29 am

Those over-sized outlines were the bane of my life when I first discovered image replacement–nice article on removing them! I’m especially glad that you covered the need to replace them with something. Messing with a fairly fundamental UI behaviour is a powerful tool, and as we learned from Spiderman: With great power comes great responsibility.

The subtle highlight used on this site is nice. An alternative for the virtuously lazy is to remove outlines for the :active pseudoclass, and not :focus; this way, the outline won’t appear when you click on a link, but is still visible for those using keyboard navigation.
Ryan Williams 2008/06/11 4:49 am

Does this also work for Internet Explorer 6? I can’t really test it as the alpha build I’m using on Vista loves to crash when you drag whilst holding down the left mouse button.

And yes, care should always be taken when doing this. Doing it on text links and whatnot is usually fine as it just shows the other :active styling (eg: background colour, text colour) upon each tab, but images are more tricky.

Indeed, navigating between several button graphics as a top navigation could be almost impossible depending on how you implement the rollover/highlight effect. Pure CSS rollovers are obviously the answer here as they’ll make use of :active. And if you have no rollover/highlight effect at all… make one. ;)
Perishable 2008/06/14 9:23 am • Post Author

@Jordan: Certainly have to agree with the Spider-Man quote, especially where CSS and usability are concerned! Excellent tip about only removing the outlines for :active and not :focus. I will definitely be implementing that method in my next design. Thanks Jordan! :)
Perishable 2008/06/14 9:37 am • Post Author

@Ryan: No, I don’t think Internet Exploder supports the infamous CSS outline property. The good news is that IE8 will provide support for outline and a whole host of other CSS-2.1 properties. In the meantime, there are JavaScript methods for coercing pre-8 versions of IE to remove unwanted outline borders, but something tells me it just isn’t worth it.. ;)
Ken Westin 2008/06/18 6:26 pm

Hey thanks for using GadgetTrak.com as an example…heh wouldn’t have thought about trying to find a fix otherwise, just added your fix to the site.

Thanks

Ken Westin
GadgetTrak Founder/CEO/Chief Web Moneky
Perishable 2008/06/22 8:27 am • Post Author

Happy to help, Ken! Your site is looking much better! Also, thanks for all the work you do over at GadgetTrak.com. It’s an excellent service that is much-needed in today’s crazy klepto culture.
Regards,
Jeff
bez 2008/06/27 2:15 am

Hey,

thanks for the tip, great stuff!
though I have a “minor” issue
with ie6,
it seemed that these nasty
dotted lines are gone but the minute I tab my menu the lines
come back and stay there even
if I only click the mouse.

as long as I don’t tab they don’t
show up but the minute I do they come back.

I used this rule at the top of
my style sheet:

* :focus { outline: 0; }

it is only happening with ie6.
any ideas?

again thanks for this article!

Bez
Perishable 2008/06/29 2:00 pm • Post Author

Hi bez, unfortunately IE6 doesn’t support the outline property. As far as I know the only solution is to either use JavaScript to remove the outlines or else use a different method (i.e., no indent) for the link. For an excellent summary of nine(!) different image-replacement techniques, check out CSS Tricks excellent article, Nine Techniques for CSS Image Replacement (404 link removed 2014/03/26).

123…5 • Newer Comments »