Back to Blog
Snippet / January 30, 2009

CSS: Remove Dotted Outline Border From Active Links

By Cary Dunn/8760 Views/15 Comments

So you're doing some clever Javascript and you have a link tag <a> 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

Comments

Posted by Dave Shenk on about 1 year ago09ddba95052429ee58741bf31aedb943?s=30

Or in 1 line.

a { outline: 0 none; }
Posted by Nathan Bertram on about 1 year ago3c29a8da5875ee83f516061d429f287d?s=30

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.

Posted by Cary Dunn on about 1 year agoBbbf5ba8e501f521508aec38d839f497?s=30

Thanks for the comments! Both are great points.

Posted by Zeke Sikelianos on about 1 year ago8f344b1c4bdcfc28bd848e97e94c3523?s=30

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

Posted by Gregor on about 1 year ago24fc194843a71f10949be18d5a692682?s=30

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
Posted by akbük on 7 months ago4a4d8b14f1cc628e951774ad320e039e?s=30

t?kler

Posted by Jeroen on 6 months ago6febaa9164fc1595438fce7a67a5180a?s=30

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

Posted by A.rnaud on 5 months agoD789c0fc43bff375a3958c8d509a5f02?s=30

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

Posted by Zoffix Znet on 5 months ago46f61a8a15c5e234ad416b590a2676c9?s=30

>> "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...

Cheers

Posted by Mia on 5 months ago2aa9a838d2f39b0afa2efe25942bbbec?s=30

I believe I've tried around 30 diff codes to eliminate this effect - I would now like to say : "Thank you Dave Shenk !"

Posted by Mia on 5 months ago2aa9a838d2f39b0afa2efe25942bbbec?s=30

P.S : Great site boys :)

Posted by Rox1SMF on 5 months ago1e598abb495bc96eb20130116e6b3d6f?s=30

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

Posted by Mircea on 5 months ago46f61a8a15c5e234ad416b590a2676c9?s=30

Thanks Cary Dunn

Posted by Sathya on 3 months ago662c4ab300a5634ad5291c9ac25b770e?s=30

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

Posted by okosine on 2 months ago03dfbbda1f4f2b8f2d637b384bbd09b3?s=30

Thank You !

Add a Comment



Post Type

  • Snippet

Published At

  • January 30, 2009

Post Stats

  • 8760 Unique Views
  • 15 Comments
 

Tags

 

Related Posts

 

We also post updates and blog posts over on our twitter account. Have one? Follow us!

» Follow Us