How to Remove Dotted Border Around Active Hyperlinks in IE8 with CSS

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

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.

Is there anyway to remove the border around clicked links in IE8 & below?

Use this CSS:

a:focus, a:active {
    outline:none;
    ie-dummy:expression(this.hideFocus = true);
    border: 0px none;
}

how to remove dotted border around the link in IE7

It's ugly, but so are most IE fixes.

a:focus, *:focus {
    noFocusLine: expression(this.onFocus=this.blur());
}

How can I remove the outline around hyperlinks images?

For Remove outline for anchor tag

a {outline : none;}

Remove outline from image link

a img {outline : none;}

Remove border from image link

img {border : 0;}

How to remove borders around links in IE?

TL;DR

Remove borders from all links and images:

a, img {
    border:none;
    outline:none; /* this breaks accessibility */
}

**Full version**

If you only want to remove borders from images that are links, you should do the following:

a img {
    border:none;
    outline:none; /* this breaks accessibility */
}

The only difference is that there is no comma between a and img meaning only images inside a-tags will have this rule applied

Pro tip: Use a css reset

Browser inconsistencies like this one are numerous, so web developers often use a "css reset" i.e. https://necolas.github.io/normalize.css/ or http://meyerweb.com/eric/tools/css/reset/. This will (among other nifty things) reset things like borders, margins, etc. on a number of elements so they render more consistently across browsers.

Note on accessibility

The dotted outline, that is often judged as disturbing by developers, has a very important function for keyboard users.

You should never remove it. If you do, you need to find another visual indicator of where focus is, by adding a :focus style

Infamous outline: none; issue within IE(8)

The following line in your <head> element is biting you:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

As mentioned in this answer, you need to remove that line to disable IE7 emulation mode. Note also that if you're running on IIS, the server itself can force this emulation mode (so check that also, if removing this doesn't solve the problem). Also, make sure your doctype is set appropriately.

issue - browser adds a dotted border on active links

Use the :focus class.

a:focus{ outline:none; }

You should however, consider adding alternative styles to this class, as purely disabling it will hinder usability.

A href remove all styling

try adding this to your css

outline: 0;

How to Remove Dotted Border Around Active Hyperlinks in IE8 with CSS