Sharpen Your Site by Removing Unwanted Link Border Outlines

by Jeff Starr on Tuesday, June 10, 2008 – 52 Responses

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. 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 provide good examples!):

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!

Resources

¹ Check out a simplified live example

Short URL:

40635 visits

Post #560 categorized as Presentation, last updated on Jun 11, 2008
Tagged with css, design, images, links, tips, tricks, usability

Share this article

52 Responses

Add a comment

Eric – #1

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 – #2

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

RUDE – #3

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 – #4

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 – #5

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 – #6

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 – #7

@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 – #8

@Ryan: No, I don’t think Internet Exploder supports the infamous CSS outline property. (Here is an excellent summary of browser support.) 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 – #9

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 – #10

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 – #11

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 – #12

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.

Bez – #13

Thanks for the quick replay Perishable, I should have known that
ie6 is useless :(

Thanks for the help anyways,

One day… one day I will tame
this rebel browser!!!

Perishable – #14

I feel your pain, Bez — we all feel your pain! ;)

ZeSev22 – #15

THANKS A BUNCH!!!!

ZeSev22 – #16

Sweeeet!
I have been looking all over the web for the fix to this VERY annoying outline and just as I was ready to give up, I found your site.
Thanks dude!

Perishable – #17

My pleasure, ZeSev22 — happy to help! :)

The Iceman – #18

Great solution. I use a little ’stretcher’ on our website to expand text and collapse text. I was very happy to find this to eliminate the outlines especially using firefox.

Thanks again… Appreciate the easy method of getting rid of that stuff!

Perishable – #19

Excellent, Iceman — glad to be of service! :)

Branden – #20

This saved me! Thanks for this. I had a hard time finding out what the heck those little lines were called in the first place. Thanks again for the simple solution to removing these for my sifr fonts!

Perishable – #21

My pleasure, Branden — thanks for the feedback!

dsf – #22

thanks for this tip, been searching for something like this

* :focus { outline: 0; }

for a while now. great trick, nothing to say, just one more time thanks.

dsf – #23

great css tip, thanks.
however using -moz-outline: 0 none;
will break any w3c validations, i’m pointing this out just as a warning

fragrant.monkey – #24

unfortunately the only method i’ve ever found that works in ie is by adding the following to every link in the markup… (i know, for shame…)

onfocus="if(this.blur)this.blur()"

eg.

<a href="info.html" rel="nofollow">

Jeff Starr – #25

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

Michael – #26

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 – #27

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 – #28

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

Jeff Starr – #29

My pleasure, anton — happy to help! :)

teddY – #30

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 – #31

@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 – #32

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 – #33

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 – #34

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

mtness – #35

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 – #36

Always a pleasure to hear from you, mtness :)

Stay well,
- Jeff

Matthias Mächler – #37

Thanks for the outline-remove tip, you made my day.

best regards
Matthias Mächler

Jeff Starr – #38

Awesome, Matthias — glad to have helped.

Vee – #39

A big, big THANK YOU for this!

This was a problem “haunting” me for a while now, as those borders are totally unesthetical and may ruin even the most professional and elegant design. I knew of a more empirical fix for the problem, but this one is simply brilliant and very easy to use.

Thanks again!

Jeff Starr – #40

Happy to help, Vee — thanks for the feedback :)

david – #41

thanks so much.. youd be surprised how hard it was to find an answer to this problem that didnt involve border=0 in HTML

Jeff Starr – #42

Glad to be of service, david! :)

karachiite1 – #43

i hate those border lines……….great tip! thanks!

Steve – #44

Hi Jeff
Great article …big help.
Just wondered if you know how to remove the link outline within a cs4 flash movie that has buttons with links
I tried applying the zero outlne class to the div containing the SWF file but it doesnt clear the outline.
Many thanks
Steve

Ryan Williams – #45

You need to apply it to the ‘object’ and ‘embed’ tags.

Steve – #46

Hi Ryan
Thanks for the quick reply.
I use Dreamweaver cs4 and loaded the SWF file from the insert command which places it in page okay but doesnt embed it.
I applied “outline: "0” (and tried “outline: "none”) to the object class but still got the outlines.
However I then deleted the inserted SWF and inserted it as a plugin which embeds it and hey ho the outlines dont appear even without setting an outline class.
Can you shed any light on that …if embeded does that make all the difference?
and what are the principal advantages or disadvantes between object and embed?
Many thanks
Steve

Jeff Starr – #47

Steve, I think you may want to check your CSS syntax.. it looks like you have an extra quotation mark in your declarations. Perhaps that’s the issue..?

Steve – #48

Hi Jeff
The syntax errors are just the way I wrote the comment , its not the way it was actually coded. In the class code I only put " " around the value.
Thanks
Steve

durachka – #49

Steve,

I’m having the same issue as you, however the plug-in didn’t work either. Are there any other settings you might have changed along with it?

Diego – #50

THX! I had been fighting for over a day with a flash gallery inside an iframe and this was the only solution that worked.

thx (a lot)

Jeff Starr – #51

@Diego: My pleasure - glad to hear it worked for you :)

Trackbacks / Pingbacks

kindragoehler.com » Tip of the Day

Share your thoughts..

Read Comment Policy

Comment Rules: No spam. No profanity. Use your real name. You may use simple HTML tags for style. Wrap all code in <code> tags. Learn more.

4154+ Subscribers

Welcome to Perishable Press

Jeff Starr aka Perishable Focused on clean code and quality content, Perishable Press is the online home of Jeff Starr, author, artist, designer, developer, and all-around swell guy. More..

Standards-based Website Design

Presentational Design – CSS, Art, Print, Graphics
Behavioral Design – JavaScript, jQuery, Flash
Functional Design – Ajax, PHP, SQL, HTAccess
Structural Design – (X)HTML, XML, RSS, MySQL
Multimedia Design – Audio, Photography, Video

WordPress, Blogging & Security

WordPress – Plugins, Themes, & Tutorials
Blogging Tips – Social Media & Social Networking
Site Security – Anti-spam, Blacklists & Firewalls

Current Dialogue

kn33ch41: "But for good browsers such as Opera and Safari, most users are quite savvy, understanding the game and always keeping their browsers...
Paul: First off great list. Probably the one of the best I've ever seen. I enjoyed your limiting of The Wall, and Dark Side of the Moon. He...
kn33ch41: I use method three, and use method four when a selector only requires one property....
r-a-y: Great code. Just wondering if, in certain scenarios, a permalink can be longer than 255 characters. I can think of a weird exam...
Jeff Starr: Thanks Oliver! Glad you enjoy the book. Thanks for the great feedback :)...
More recent comments..

Sharpen Your Site by Removing Unwanted Link Border Outlines

A Plain and Simple Problem

A Quick and Easy Solution

CUL8R

Resources

Share this article

52 Responses

Trackbacks / Pingbacks

Share your thoughts..

Welcome to Perishable Press

Standards-based Website Design

WordPress, Blogging & Security

Recent Articles

Current Dialogue

Featured Content

Popular Posts

Current projects

Featured

Friends

Too cool for Flickr..

Sharpen Your Site by Removing Unwanted Link Border Outlines

A Plain and Simple Problem

A Quick and Easy Solution

CUL8R

Resources

Share this article

Related articles

52 Responses

Trackbacks / Pingbacks

Share your thoughts..

Welcome to Perishable Press

Standards-based Website Design

WordPress, Blogging & Security

Recent Articles

Current Dialogue

Featured Content

Popular Posts

Current projects

Featured

Friends

Social Media

Too cool for Flickr..