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 = Fullstack Developer. Book Author. Teacher. Human Being.

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

Jeff Starr 2008/09/01 9:28 am • Post Author

Thanks for the tip, fragrant.monkey :) Gotta love IE!

Michael 2008/09/17 3:30 am

I came across this website when i was looking for an IE solution for the borders. The *:focus is very i already used this.

I dont like using js to swap to blur for ie to fix this so heres a solution you guys might like.

I use the * syntax hack in my stylesheet set the border to none fixed it.

I was in need of a border though and i was using a bg so i fixed it like this:

*border:none;
*background-repeat: none;
*background-position : 2px;
*padding: 2px;

My background color was set to white so this added a white border of 2px for me.

Hope this helps for some of you out.

Greetz FaitH

Jeff Starr 2008/09/17 9:03 am • Post Author

Thanks for sharing this, Michael; I look forward to testing it on older versions of IE. The star-property hack affects all IE including 7, so I wonder if the underscore hack would be a better way to go..? IE7 supports the CSS method provided in the article.

anton 2008/09/24 4:26 pm

HEY! you rock. thanks you for sharing, this was giving me a brain ache.

Jeff Starr 2008/09/27 7:23 pm • Post Author

My pleasure, anton — happy to help! :)

teddY 2008/12/17 2:11 am

Hey Jeff, I was browsing through your tutorials when I stumbled upon this ;) I just realised that it is actually possible to remove the outlines. They are obstructive and are apparent especially when designers use the CSS text-indent property. When I scrutinized my CSS reset stylesheet (thanks for sharing your tips on CSS resets in your other post) I realised that it is the outline property that keeps the outline from appearing. I never knew its significance of that property until you’ve written about it here. It’s really handy!

Jeff Starr 2008/12/17 5:35 pm • Post Author

@teddY: Excllent! Glad you found the information useful! Btw, I also recently posted some JavaScript methods for removing the focus outlines in IE6 as well. Using both a JavaScript method and the CSS method is a great way to remove the outlines in almost all browsing cases; that is, only IE6 users without JavaScript will see the unwanted outlines. Thanks for the comment!

August Klotz 2009/01/19 5:13 pm

I have also seen that using overflow:hidden while using text-indent is a better solution for eliminating the unwanted “stretching” part of the outline while keeping the outline focus border wrapped tightly around the target link element. Works a little better for usability, blah blah blah.

Zaenal - Lokamaya 2009/04/19 9:38 pm

Hi,

I’m looking for this for long time. And usually I’m using Javascript “this.blur()” to avoid outline. I really hate using this technique.

But this CSS solve the problem. Big thanks…

@zaenal

Jeff Starr 2009/04/20 9:21 am • Post Author

@Zaenal – Lokamaya: My pleasure — thanks for the feedback! :)

mtness 2009/06/23 7:06 am

Hi there again!

thank you for that beautiful insigth, I have searched for this a very long time!

Came here through:
http://www.google.com/search?q=javascript+remove+dotted+border+hightlight

Kind regards,

mtness

Jeff Starr 2009/06/23 3:00 pm • Post Author

Always a pleasure to hear from you, mtness :)

Stay well,
– Jeff

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

Jeff Starr 2008/09/01 9:28 am • Post Author

Thanks for the tip, fragrant.monkey :) Gotta love IE!
Michael 2008/09/17 3:30 am

I came across this website when i was looking for an IE solution for the borders. The *:focus is very i already used this.

I dont like using js to swap to blur for ie to fix this so heres a solution you guys might like.

I use the * syntax hack in my stylesheet set the border to none fixed it.

I was in need of a border though and i was using a bg so i fixed it like this:

*border:none;
*background-repeat: none;
*background-position : 2px;
*padding: 2px;

My background color was set to white so this added a white border of 2px for me.

Hope this helps for some of you out.

Greetz FaitH
Jeff Starr 2008/09/17 9:03 am • Post Author

Thanks for sharing this, Michael; I look forward to testing it on older versions of IE. The star-property hack affects all IE including 7, so I wonder if the underscore hack would be a better way to go..? IE7 supports the CSS method provided in the article.
anton 2008/09/24 4:26 pm

HEY! you rock. thanks you for sharing, this was giving me a brain ache.
Jeff Starr 2008/09/27 7:23 pm • Post Author

My pleasure, anton — happy to help! :)
teddY 2008/12/17 2:11 am

Hey Jeff, I was browsing through your tutorials when I stumbled upon this ;) I just realised that it is actually possible to remove the outlines. They are obstructive and are apparent especially when designers use the CSS text-indent property. When I scrutinized my CSS reset stylesheet (thanks for sharing your tips on CSS resets in your other post) I realised that it is the outline property that keeps the outline from appearing. I never knew its significance of that property until you’ve written about it here. It’s really handy!
Jeff Starr 2008/12/17 5:35 pm • Post Author

@teddY: Excllent! Glad you found the information useful! Btw, I also recently posted some JavaScript methods for removing the focus outlines in IE6 as well. Using both a JavaScript method and the CSS method is a great way to remove the outlines in almost all browsing cases; that is, only IE6 users without JavaScript will see the unwanted outlines. Thanks for the comment!
August Klotz 2009/01/19 5:13 pm

I have also seen that using overflow:hidden while using text-indent is a better solution for eliminating the unwanted “stretching” part of the outline while keeping the outline focus border wrapped tightly around the target link element. Works a little better for usability, blah blah blah.
Zaenal - Lokamaya 2009/04/19 9:38 pm

Hi,

I’m looking for this for long time. And usually I’m using Javascript “this.blur()” to avoid outline. I really hate using this technique.

But this CSS solve the problem. Big thanks…

@zaenal
Jeff Starr 2009/04/20 9:21 am • Post Author

@Zaenal – Lokamaya: My pleasure — thanks for the feedback! :)
mtness 2009/06/23 7:06 am

Hi there again!

thank you for that beautiful insigth, I have searched for this a very long time!

Came here through:
http://www.google.com/search?q=javascript+remove+dotted+border+hightlight

Kind regards,

mtness
Jeff Starr 2009/06/23 3:00 pm • Post Author

Always a pleasure to hear from you, mtness :)

Stay well,
– Jeff

« Previous Comments • 12345 • Newer Comments »