Technology Blog

Remove Dotted Border From Links

You must have a seen a dotted border around links when you click over them. It actually removes the beauty of your web pages for example in website headers.

So to remove the dotted border from the active or selected links simply add this CSS code in your style sheet

*:focus {
        outline: 0;
}
*:focus { outline: none; }
*::-moz-focus-inner { border: none;}

This hack works for both Firefox and Internet Explorer 7+

Related: Reduce the Size of your CSS Code

Friday, May 01, 2009 written by

5 Responses to "Remove Dotted Border From Links"

Anonymous

June 7, 2009 at 10:31 AM

WOW! Amazing! Thank you for sharing!

Zoffix Znet

August 19, 2009 at 3:22 AM

While the dotted border removes "beauty" your code completely removes keyboard usability from your site and doesn't work in IE6/IE7.

This tutorial: http://haslayout.net/css-tuts/view?tut=Removing-Dotted-Border-on-Clicked-Links

has a more usable method to remove/style that border as well as contains a fix for IE

Cheers!

designermagic

September 15, 2009 at 8:20 PM

Thanks for this tip.
I have posted on my blog here: http://techcruser.blogspot.com/2009/05/remove-dotted-border-from-links.html and linked back to you.

Kulsurya

December 2, 2009 at 3:27 PM

Thanks for your suggestions, really its working now. we got wonderful output from ur answer.

Thanks alot

Rajesh Goutam,Kulsurya Saini and SuReNdRa KuMaR JaNgId

abdul jabbar

May 21, 2010 at 5:28 PM

this is really an amazing... thanks for sharing