Remove Dotted Link Borders in Firefox

by Sushant Risodkar · 9 comments

Everyone would have noticed in their Blogs that whenever you click an Link a dotted border appear around the link. The dotted Border not only appears for links but for all images , Post Titles , etc. It’s some what Annoying .This Is Not a big deal, but it’s good without the dotted lines . I am not sure if you have noticed it or not but i did.We can just ignore this for most of the times but sometimes it affects the look and feel of the site.

The Cause

When a link is clicked, it gets the focus. Firefox adds dotted borders to links that have focus to remind the users.

If you want them out as well or want to stop the dotted outlines here’s the simple thing to do. We just need to add outline:none to the a tag.


The Solution

To avoid the border, add this CSS rule to your page:

Go to your Dashboard then click Layout then Edit HTML place the code below:

a {
outline: none;
}

then save.

If your not sure where to place them, just click Ctrl+F then type a img then place the above code under it…please refer the image below for clarification.

And It’s Done, Enjoy!



Top 10 Search Terms:

• firefox link border • firefox link border remove • remove link border firefox • firefox remove link border

About Sushant Risodkar

Yo! I'm +Sushant Risodkar & my nickname on web is Typhoon. I'm a 19 yrs. old young blogger from India & the owner of SmartBloggerz. If you are looking for SUCCESS as a blogger & affiliate marketer then SmartBloggerz is the right blog for you. You can follow me on Twitter or be my friend on Facebook. And hey! Don't forget to LIKE SMARTBLOGGERZ on Facebook. Read more About Sushant Risodkar.

has written 377 superb article(s) on this blog

Follow me on Twitter · Visit my website →

Anonymous August 14, 2008 at 3:34 pm

Thank you!

Mohamed Rias August 15, 2008 at 11:21 am

Hi there ,

I am Mohamed Rias , Admin of Blogger Accessories. You haven’t got any permission from me to publish this article. Please remove this post or link to my original post.

regards,
Blogger Accessories

Typhoon August 15, 2008 at 2:25 pm

This is not ur Hack Man!ur hack was Something jquery Link Scrubber n lablaab… this hack is from buzznitter n it’s easy to use now don’t spam my blog..ok

Krisditya January 3, 2009 at 6:53 pm

Yes..Thank You !

Zoffix Znet August 18, 2009 at 5:01 am

Hello, I just wanted to note that using “a { outline: none; }” completely breaks keyboard usability, which is what that dotted border is about – it’s not just some browser bug.

Also, that piece of code will not work for IE6 and IE7.

If anyone is interested in a more accessible solution that includes removing the border in IE6 and 7, please see my write up on the subject: http://haslayout.net/css-tuts/view?tut=Removing-Dotted-Border-on-Clicked-Links

Cheers!

Typhoon August 18, 2009 at 2:33 pm

Actually this trick was introduced by my friend and I blogged about it. Don’t know much about it. But keeping trust on you, I think what you said is correct.

Martijn van Turnhout February 28, 2010 at 9:44 pm

Yeah I agree with Zoffix: it goes against every accessibility rule I know. Try surfing the web without a mouse. Use only a keyboard for browsing. You’ll see that those outlines are extremely important. It’s pretty much the only way of seeing where you’re currently tabbing.
.-= Martijn van Turnhout@Zoekmachine optimalisatie´s last blog ..Professionele presentatie bouwbureau Holm de Jong =-.

James June 9, 2010 at 5:04 pm

Thanks for the tip. The dotted border does annoy me. Still better than using IE8 anyway.

Mike October 5, 2010 at 8:41 am

Well, The dotted line that you are referring to are just fine, I don’t really mind them at all. As you have mentioned, they are just reminders by Firefox, so the users would understand that. Either way, thanks for the trick.

Previous post:

Next post:



whos.amung.us