How to remove dotted border around active hyperlinks in IE8 with CSS

Question

Active hyperlink texts are highlighted with dotted border. When using effects on such hyperlinks (fadeIn/fadeOut) it produces strange effects. How do I disable/remove the do

Answer 1

This one works the best for me

a{
  outline: 0;
}

Answer 2

a img {border: none; }

that's it, no need to complicate this.

Answer 3

i wanted to get this working for Button and this worked for me

button { 

    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;    
    background-color: transparent;
    noFocusLine: expression(this.onFocus=this.blur());
}

Answer 4

The a { outline: none; } breaks keyboard usability. And the a:active {} selector seems to break it just as good last time I checked in Firefox.

There is a JS way to get rid of the border without breaking anything, as well as JS code to get rid of the border in IE6 and IE7.

I described the method in my tutorial.

Answer 5

Be careful. The dotted-border is a valuable part of keyboard-browsing. It highlights which link will be clicked.

a:active { outline: none; }

Author Nathan Smith gives a more thorough discussion of this, and various related issues on his blog.

Answer 6

a:active, a:focus {
    outline:none;
}