How to eliminate dotted border around html links

August 23, 2007

Ever wonder how to get rid of that annoying dotted border around html links? Well, there is a way and it’s not really that hard and we’ll show you how. Luckily IE 7 fixed the problem but it still shows up in IE 6 and Firefox. All you have to do is add an attribute call “onFocus” with the value of “this.blur()”to your link tag (<a></a>).

For example a normal link such as:
<a href="/contact-red-olive.html" mce_href="/contact-red-olive.html" ><img src="/images/button-contact-red-olive.png" mce_src="/images/button-contact-red-olive.png" alt="Contact Red Olive Design" name="Contact" width="124" height="64" border="0"></a> will have the dotted border in IE7 and Firefox.

But if you add this onfocus="this.blur()" to it, it won’t like this:
<a href="/contact-red-olive.html" mce_href="/contact-red-olive.html" onfocus="this.blur()"><img src="/images/button-contact-red-olive.png" mce_src="/images/button-contact-red-olive.png" alt="Contact Red Olive Design" name="Contact" width="124" height="64" border="0"></a>