Blog

Jan
29
CSS: Remove Dotted Outline Border From Active Links
by Cary Dunn | Snippet

So you’re doing some clever Javascript and you have a link tag tag that you want to act as say a tab or a button, but when you click down on the link you get this ugly dotted border highlighting your selection!

elc technologies - Core.jpg

No good. Spice up your CSS with a little…


outline-style:none;
outline-width:0;

and you’ll be living large with a more “tabular” or “buttonular” feel.

98e2cb11fc777654e1a825bb48d194f1052913ba_1233291631_0

16 Comments
January 30, 2009

Or in 1 line.


a { outline: 0 none; }

Nathan Bertram
January 30, 2009

One thing to keep in mind about the outline property is that it is an accessibility feature. When you tab through a web page the purpose of the outline is to show you where your cursor is.

January 30, 2009

Thanks for the comments! Both are great points.

January 30, 2009

Thanks for pointing this out Cary. Those dots were driving me nuts just last week.. didn’t know you could fix it with CSS!

February 3, 2009

I would suggest:


a:active { outline: none;}

It doesn’t interfere with the accessibility issue mentioned by Nathan.
I think you can also return false in your click event to avoid the dotted lines

July 12, 2009

t?kler

August 12, 2009

What is the code voor internet explorer? The CSS is only for firefox.

August 13, 2009

A small Google search, your article, a website fixed.
Thanks :)

August 17, 2009

>> “It doesn’t interfere with the accessibility issue mentioned by Nathan.”

The :active{} does interfere with keyboard accessibility; at least in modern browsers (e.g. Firefox3, Opera9.5 and IE8)

There is a JS way to remove the border without destroying usability – or better yet, style that “dotted border”.

For the guy who wanted the IE6/7 fix, see my write up on the subject: http://haslayout.net/css-tuts/view?tut=Removing-Dotted-Border-on-Clicked-Links

Cheers

August 26, 2009

I believe I’ve tried around 30 diff codes to eliminate this effect – I would now like to say : “Thank you Dave Shenk !”

August 26, 2009

P.S : Great site boys :)

September 2, 2009

So very, very handy… thanks guys. ELC rawks!

Mircea
September 10, 2009

Thanks Cary Dunn

Sathya
October 21, 2009

Hey dude, you are fabulous! Never thought a simple line would do that trick. Thanks from a starter! :) Thanks Dave.

okosine
November 12, 2009

Thank You !

edwarma
May 18, 2010

I looked everywhere for this fix, and then I found this, thank you so very much!