How to remove the active/focus borders

I’m sure you have noticed that when you click a hyper link, and especially a linked image, a dotted border appears around it. Have a look at CSSplay for more examples and proper CSS code fix related to this.

A few quick solutions

For those of us using the jQuery Java framework the “solution” is incredibly simple. Just call the following function in your header and all dotted borders are gone:

jQuery("a").focus(function(){this.blur()});

Using CSS it’s almost as simple (at least for all browsers except IE):

a:focus {outline-style: none;}

Using basic JavaScript the following should do the trick:

for(var i=0;elm=document.links[i];i++)
{
elm.onfocus=function(){elm.blur();};
}

Some would probably say that this shouldn’t be done because the active/focus dotted border is there to show visitors who are using tabbed link selection which link is selected. But when we are using CSS we can style our own active/focus state and in this case the dotted border is not so necessary. I’ll appreciate your take on this as I’ve debated this “issue” with some of my clients on several occasions.