Removing Dotted Border on Clicked Links

Description

Dotted border appears on clicked links - what is it about and how to deal with it

Date of the Tutorial

Sun Aug 16 22:00:27 2009

Overview

Yes, yes, I know, there are a ton of tutorials online that show a simple "solution" for this "dotted border around clicked links". However, I am yet to see a tutorial that does not treat this accessibility feature as a "bug" or at least describes why that border appears when one clicks a link.

In this tutorial I will try not to take any sides; removing the border decreases your site's accessibility and not removing it makes things look "ugly". I will explain why that border appears, what it is for and how to remove it - it will be up to you to decide on how to deal with the problem.

Why Do We Have That Dotted Border?

You create a stunning graphical navigation and you style up your links nicely for it. You click the link and during that moment from the click until the next page loads you see a funny looking dotted border around the links. Moreover, if you're using text-indent to hide the actual text from the links you may see that that border extends through the entire page (just add a { overflow: hidden; } to fix that). You decide that the border is "ugly" and you go off trying to figure out how to get rid of it, but have you ever asked yourself why that border is there? Let's take a look at what I am talking about first:

The demo is shown on a separate page

HTML Code:

<ul>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
</ul>

Nothing special here, just regular markup. Go ahead and load up that demo and play around with it - click the links... see the border? Note for IE6 and IE7: if the dotted border does not show up when you click the links, simply hit TAB upon page load and now the borders will show up on clickety. Note for Opera: it has more advanced keyboard shortcuts and I haven't had time to figure out how to enable the keyboard browsing mode... so there.

That border is an accessibility and usability feature. The reason you may not think that it is is because you're not actually using it. What happens is that browsers have default styles set on :focus and the dotted border you see is created by outline property. When you click the link, it becomes "in focus" and you see the border. The proper way to utilize this accessibility/usability feature is to use keyboard for navigating the links. Try it! Load the demo again and press your TAB key... see the border? Press TAB again, now that border is on the second link. Pressing SHIFT+TAB moves the opposite way. Now you can see that it's not about clicking. People who can't use the mouse, some public computers that do not have mice or "power users" who prefer to stay off the rodent and use the keyboard as much as possible - all utilize this marvelous feature! And what do you want to do? Remove it? Shame on you!

Keeping Up With Usability - Style

Before you butcher your page and completely remove that outline, even with the knowledge that it's a usability feature, let's look at the options. That outline is stylable in every modern browser! Unfortunately, IE6 and IE7 are not modern browsers, so let's skip them in this section. Let's take a look at the demo:

The demo is shown on a separate page

HTML Code:

<ul>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
</ul>

CSS Code:

a:focus {
    outline: 4px solid lime;
}

We have used the outline property that functions much like border except it doesn't affect surrounding elements. We have applied it to :focus pseudo-class and now upon clicking the link or TABbing through them instead of a wimpy dotted border we get a thick, lime-colored outline. Depending on your setup, styling the "dotted border" instead of getting rid of it completely may even improve the look of your page. The border does not have to be dotted or a solid line, take a look at outline-style property... don't use the none style just yet, keep on reading

Keeping [Almost] Everyone Happy - JavaScript To The Rescue

There are not that many people left who have JavaScript disabled, and those who do, would sure not care about that silly "dotted border". Since the usability part of this dotted outline on links (and buttons) involves the keyboard and it "looks ugly" only when you click the link, why don't we put the two together and think up a solution that would get rid of the border during clickety but keep it for all the l33t dudes who perfected their keyboard browsing skills? Let's have a look:

The demo is shown on a separate page

HTML Code:

<ul id="nav">
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
</ul>

CSS Code:

a:focus {
    outline: 4px solid lime;
}

JavaScript Code:

var links = document.getElementById('nav').getElementsByTagName('a');
for ( var i = 0; i < links.length; i++ ) {
    links[i].onmousedown = function () {
        this.blur();
        return false;
    }
    links[i].onclick = function() {
        this.blur();
    }
}

First of all, I'd like to note that in IEs (even IE8) this method does not work all that perfectly as the "dotted border" (and styled outline in IE8) show up during the actual click, read the next section on how to fix that.

I've added an id="" attribute to the container of our links for me to be able to localize the effect of the "dotted border" removal with JavaScript - seriously, just let it be in other places. The CSS code stayed the same, we just added a thick lime border instead of the dotted one; you don't have to actually do that, but I think it would look more pretty if you style that outline somehow for browsers that support that.

The JavaScript code is pretty straight-forward. Since the "dotted border" is styled on :focus we are simply removing that focus with this.blur(). Sane browsers are pretty happy with just the .onmousedown. I've added the .onclick to ditch the "dotted border" in IE; however, as I already mentioned, it still shows up during the actual click.

The beauty of this method is that all the keyboard-only users can keep on TABbing away. Load up the demo in Firefox and hit TAB key. See? The lime outline clearly shows on which link we currently are, yet clicking the link with the mouse produces no borders.

Screw IE! I Want The Border Gone!

Alright, the "dotted border" is still a bother in IE browsers. What to do? Why don't we go ahead and butcher the usability for only IE browser and keep our super-duper usable "dotted border" removal solution for sane browsers? Let's have a look at how we're going to do that:

The demo is shown on a separate page

HTML Code:

<ul id="nav">
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
</ul>

CSS Code:

a:focus {
    outline: 4px solid lime;
}

JavaScript Code:

var links = document.getElementById('nav').getElementsByTagName('a');
for ( var i = 0; i < links.length; i++ ) {
    links[i].onmousedown = function () {
        this.blur();
        return false;
    }
    links[i].onclick = function() {
        this.blur();
    }
    if ( /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent) ) {
        links[i].onfocus = function() {
            this.blur();
        }
    }
}

Everything stays the same as in previous demo with the exception of an extra piece of JavaScript code. What we are going here, is detecting if the browser is an IE browser and if that's the case, we are removing focus from focused links (using .onfocus event handler). This will break the keyboard usability, but it will only happen in IE browsers - can't keep everyone happy, now can we?

I Am The Victim - The Other Side of The Chessboard

There are a lot of sites that boldly use a {outline: 0;} to get rid of the "dotted border", so what to do if you are the person who needs it?

The answer is user sheets. Most sane browsers allow the user to specify their own style sheet that will be included along with the page's styles. You'll have to figure out how to set that sheet on your own. All I can say that in Firefox on Linux you'd want to edit ~/.mozilla/firefox/your_profile/chrome/userContent.css (copy the sample from userContent-example.css that is located in the same directory). The code that you would want to put in there is as follows:

CSS Code:

:focus {
    outline: 5px solid blue!important;
}

Note that I used :focus and not a:focus; this is for affecting not just the links but form elements, such as submit buttons, as well. Secondly, I've added !important keyword to modify the specificity of the rule to override whatever the author of the page has set. You are now all set!

Comments

service

Tue May 8 10:17:13 2012

Thanks for the post.Really thank you! Great.
wholesale men clothing

Tue Mar 20 21:18:11 2012

Fantastic blog article.Thanks Again. Awesome.
Arthur UX

Fri Mar 2 04:29:15 2012

This is wonderful content. I read the whole thing even though I got my answer in 10 seconds.
Peter Vasdi

Wed Nov 30 00:06:50 2011

Thank you for all that effort. I have IE. However I don't know how and where to put the jscript, nor how to link the no-outline to that script.
Muhammad Ali

Sat Nov 12 05:36:52 2011

what a nice tutorial.Thank you very much.
Anon

Thu Oct 20 15:27:45 2011

Nice article =)

FYI, in the case of the :focus user style sheet, the !important should not be really needed because in theory CSS styles are applied (and overrided) in this order :

Site CSS -> Site CSS with !important switch -> User CSS -> User CSS with !important

Really don't know if every user agent is applying this rule, but it should be.
Ciaran O'Connor

Sun Oct 16 05:45:00 2011

This is a fantastic article!!! Thanks so much for helping me with my website!!!
nick

Tue Sep 6 13:43:17 2011

yes!!! this is what im looking for.. tnx a lot mate...
Chaim Chaikin

Thu Jun 9 16:10:27 2011

Very good article!
It's all very well to "Screw IE!" but you got to remember that, sadly, it is still the most popular browser and you can't just turn off accessibility for so many of your users.
In my opinion usability comes before design, so you should probably just let all those IE users just see the outline.
xod

Fri May 6 22:50:53 2011

This is the best article about this topic! Thank you for taking the time!

I don't know what the above "jQuery" Examples are, but they are not working...also a double post doesn't solve this =)...so here is the working version (jQuery 1.6, but should also work with older verions)
<pre>
// Fix the whole outline drama
$('a').live('mousedown', function() {
$(this).blur();
return false;
}).live('click', function() {
$(this).blur();
}).live('focus', function() {
if ( $.browser.msie ) {
$(this).blur();
}
});
</pre>

with the following css

<pre class="css-code">
a:active {
outline: none; /* no dotted outline */
}

a:focus {
outline: 1px dotted #000000;
/*-moz-outline-style: none; /* no dotted outline */
}
</pre>

the out-commented lines remove the functionality completly, but we should preserve it for tabbing to a link at least! With the above code, this is possible in Firefox and Webkit-based Browsers (Safari/Iron/Chrome), IE doesn't work with Tab, but as said above, f*** IE...and in Opera it doesn't work too, but there I don't see that Tab-To-Links feature anyways...no matter if I use the js or not...
Praveen

Sat Apr 23 06:25:34 2011

Nice Code ... Thank u
Praveen Nair

Wed Apr 13 00:26:46 2011

Hey thanks so much.

After reading your article the first thing i did was to remove all the outline:none property from my stylesheet. I think we need to take care of those people who doesn't have a mouse or using keyboards.
jmxr rivera

Sat Apr 2 14:32:49 2011

how do u do it will all the links (txt/images) at the same time?
Elron

Sun Mar 27 10:45:46 2011

Thanks so much.
i used this to remove all the outlines:

:focus {
outline: none;
}
Rishius

Wed Mar 9 04:59:35 2011

Hey, thanks for the post. It really helped us out.
Mirko

Thu Feb 17 18:25:27 2011

Thanks. Excellent x 1000.
Tom Visser

Fri Feb 11 13:59:24 2011

Thank you for the article. Really helped me out!
Sorin Roiban

Sat Jan 22 15:07:05 2011

Perfect solution for IE (we're in 2011 and Microsuck hasn't yet implemented the CSS3 specs. into their sloppy browsers):

$('a').live('mousedown', function(e) {
e.target.blur();
e.target.hideFocus = true;
e.target.style.outline = 'none'
}).live('mouseout', function(e) {
e.target.blur();
e.target.hideFocus = false;
e.target.style.outline = null;
});
Dave

Thu Jan 13 04:55:42 2011

Very useful article - thanks. Wouldn't it be nice if IE just complied to CSS standards?
whatisdamon

Sun Nov 7 12:41:59 2010

Interesting to note that in Chrome they take care of this all for you. The outline (and it's a solid orange one) only shows up when you actually press the tab key. of course every user using chrome is a pipe-dream, but it's worth knowing that if you're testing in Chrome you're not going to notice it!
Zoffix Znet

Tue Aug 3 06:23:10 2010

Jonathan, yes you can define whatever you want. Consult with the documentation for your JS framework with regard to selecting what you want...
Jonathan

Tue Aug 3 06:01:28 2010

Can you use getElementByClassName and define multiple classes like this 'class1','class2','class3' ???
Cand you define ALL hyperlinks regardless of ID or class?
Thanks
Micky

Wed Jul 14 22:30:35 2010

Thanks...
exactly what I was looking for.
Your explanations are really easy to follow, and I feel a little less like a hack for reading it.
Ahmed

Tue Jul 6 13:08:48 2010

Great article, I like it when someone takes their time explaining each detail.
Quality stuff mate. *****
Cheers
gayal

Sun Jun 6 07:57:57 2010

Thank you..you are a good teacher..!
this article help me lot..!
cheers..!
ClipThis

Mon May 24 16:57:03 2010

Thanks for the post. How about just:
a:focus {
outline: 0px;
}

That worked for me. Thanks again, this was helpful.

Quality Clipping Paths from Professional Designers
www.clippingpathsonline.com
sudo

Fri Apr 23 16:45:41 2010

The borders that occur from links in their active state aren't just an aesthetics issue. Often times the border affects layout and in more extreme cases can inhibit functionality.

Take a container with floated <a> tags (tabs for instance.) Depending on the containers rules, scroll bars may be added to the container (hideous) or child elements may be shifted out of sight, rendering them unusable.

I agree with all of the accessibility issues, but in this day and age, most sites have so many links and inputs that tabbing through them is not very likely. In any case, the real solution for good accessibility is not the browser's job. It's the designers. This is exactly why the :focus pseudo-selector was designed: to style a focused element. IE8 and up, and all modern browsers support it.
Sam R

Thu Apr 22 20:43:09 2010

Thanks so much! This was annoying me to death!
Miha

Thu Apr 22 14:17:48 2010

THANK YOU!
Bastian

Mon Mar 22 08:31:10 2010

Wasted half a day trying to remove the outline by setting border to 0px or none or... Thanks for enlightening me.
raoul

Mon Nov 16 05:08:17 2009

Hi,

Why could i just set the border to an transparent color. I can tab threw the site, or is that bad for SEO?

Thanks!
David

Sun Oct 18 17:56:25 2009

Here is my jQuery version, works in my entire test suite (IE6-8, FF etc). It also works on anchors created on the fly via DOM scripting:

$('a').live('mousedown', function(e) {
e.target.blur();
e.target.hideFocus = true;
e.target.style.outline = 'none'
}).live('mouseout', function(e) {
e.target.blur();
e.target.hideFocus = false;
e.target.style.outline = null;
});
Zoffix Znet

Fri Oct 16 17:04:34 2009

I wonder what exactly "doesn't work"; considering this tutorial provides like 3 different solutions...

Also,
(a) of course it does
(b) why would you "reset" anything then style it again? That seems a bit redundant
(c) I disagree with that assumption. Personally I use Firefox because I dislike recent Operas. There are also some public terminals (for example, a library near by uses miceless boxes for catalog searching) use Internet Explorer.

As for "interesting fact": I don't see any overrides with JS solution; if you're talking about setting `outline`, then neither version supports that property.

Cheers!
puijob

Fri Oct 16 11:40:46 2009

It doesn't work on Firefox(3.5.3) and Opera(10.10 beta) on Mac. Despite this inconvenience I find this solution overhead anyway because setting a:focus{outline-style:none;}
a) works on all major browsers on Mac and Windows
b) should only be used as a reset and after that you can take care and style :focus the same way you styled :hover
c) a person that uses a keyboard to navigate it surely uses a browser that has some good capabilities for that (like opera with alt+arrows)
An interesting fact is that IE 6&7 do override any setting of removing the outline found in the CSS author file when you use the Tab key to navigate
jawahar

Tue Oct 13 03:17:05 2009

great thanks..good post!
MValdez

Mon Oct 5 08:27:00 2009

Thanks for this article, I found your explanation of the rationale behind the link border very useful.

Regards,

MV
Ryan

Tue Sep 8 12:28:01 2009

Great article. i love the fact that you give us the choice and explian why this is happening. I think I'll just style it better and keep it there for all those who are afraid of mice!! Now can someone please point me in the direction of decent Contact Form tutorial, thats validates and sends to the succes page, preferable one that doesnt need a genuis PHP coder to do it!!! Cheers
Robin

Fri Aug 28 02:10:53 2009

Wow.. nice article!
Very helpful .. ! :D
TYSVM!
andy

Thu Aug 27 09:10:19 2009

thanx, it's very helpful info

Donate / Buy My Books

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book:

hasLayout.net

Table of Contents

Description

Date of the Tutorial

Overview

Why Do We Have That Dotted Border?

Keeping Up With Usability - Style

Keeping [Almost] Everyone Happy - JavaScript To The Rescue

Screw IE! I Want The Border Gone!

I Am The Victim - The Other Side of The Chessboard

Comments

Donate / Buy My Books