Remove Dotted Link Borders in Firefox
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:
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!
Article written by Typhoon
Yo! I am Typhoon a.k.a Sushant, a 17 yrs. old blogger from India and the owner of SmartBloggerz. Here I try to share useful Blogging related articles which would help a blogger to succeed. You can connect to me on Twitter.Typhoon has written 332 superb article(s) on this blog
August 14, 2008
3:34 pm
Thank you!
August 15, 2008
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
August 15, 2008
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
January 3, 2009
6:53 pm
Yes..Thank You !
August 18, 2009
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!
August 18, 2009
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.
February 28, 2010
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
June 9, 2010
5:04 pm
Thanks for the tip. The dotted border does annoy me. Still better than using IE8 anyway.