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

css internet-explorer-8
glaz666 picture glaz666 · Jul 17, 2009 · Viewed 80.3k times · Source

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 dotted border?

Answer

Lucas Jones picture Lucas Jones · Jul 17, 2009

Try this CSS:

a:active, a:selected, a:visited { 
    border: none;
    outline: none;
}

Note that this has to be after any a:hover rules. Thanks to PEra in the comments for suggesting using the a:selected selector as well.

NOTE

The above does not work in IE 9. Removing a:selected causes it to work in IE9.

Related questions

Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8?

Why the following example shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8? HTML: <div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div> CSS: div { width: 60px; height: 60px; border: 1px …

Read More
Opacity of div's background without affecting contained element in IE 8?

I want to set Opacity of div's background without affecting contained element in IE 8. have a any solution and don't answer to set 1 X 1 .png image and set opacity of that image because I am using dynamic opacity and color …

Read More
Opacity CSS not working in IE8

I'm using CSS to indicate the trigger text for a jQuery slide-down section: i.e. when you hover over the trigger text the cursor changes to a pointer and the opacity of the trigger text is reduced to indicate that …

Read More