How to get rid of the outline dotted border around your links
Have you ever notice? Sometimes when you have a logo on the top of your website that also serves as a “home button”, and when you click on it, a one pixel dotted border wraps around it?
That usually does not bother the regular “Joe”, but because your “OCD” can’t be easily controlled, it gets right under your skin.
Besides the looks, there is also that time you use a link to trigger an AJAX action, and there it is again, ruining your so perfectly designed website. ( some drama )
There are two approaches for achieving the desired result, one is using CSS, and the other using Javascript.
Lets take a look on the CSS version.
But because Internet Explorer is not your friend, you will probably like the javascript version, which is only a “this.blur()” command added as “onfocus”.
You will probably be smart and make a function, not apply it to every link.
Now you have it…
But know that you are compromising some usability and accessibility by doing the above.
1 comment posted