How to remove borders around links in IE?

Question

I have a navigation bar which consists of a <img> elements within their respective <a> elements. However, for some reason in IE its making a dark black border around the images. Its not doing the same in other browsers, I can't seem to figure this out... This is the html that I'm using.

<li>
   <a href="#">
      <span id="nav1">
         <img src="tt_1.png" />
      </span>
   </a>
</li>

I have about 5 links all written like that and I've used CSS to style it into a nav bar. On other browsers it comes out like this good bar

but on IE it comes out like this Bad bar :(

I've never encountered a problem like this before and what I've reserached to try and fix it so far haven't worked. Is there a way to take out these borders using CSS?

score 126 · Accepted Answer · edited Jul 13 '22 at 12:38

126

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

edited Jul 13 '22 at 12:38

Andy

4,783
2
26
51

answered Oct 26 '11 at 23:42

Mathias Bak

4,687
4
32
42

2

I have added an _outline:none_ style to remove the dotted border around active links in IE. – Olexander Ivanitskyi Feb 15 '13 at 01:30
5

Jonathan Newmuis's answer is more correct – Jacob Dorman May 13 '13 at 06:00
I have updated this answer to avoid the unintended consequences that have led some people to prefer Jonathan Newmuis's answer. – JakeRobb Mar 10 '16 at 15:11
1

`outline: none` is awful for accessibility and is completely unneeded to fix the issue. – W Biggs Oct 07 '18 at 05:19

score 75 · Answer 2 · answered Oct 26 '11 at 23:42

75

I believe IE puts borders around images that are links. So you should be able to remove this by saying:

a img {
    border: 0;
}

answered Oct 26 '11 at 23:42

Jon Newmuis

25,722
2
45
57

19

I think this is the best answer because it achieves the specific intent, the accepted answer might have unintended consequences. – cmsjr Nov 05 '12 at 21:45

score 12 · Answer 3 · answered Oct 26 '11 at 23:42

12

add style="border: none;" to whatever creates the border or create a css with this attribute.

answered Oct 26 '11 at 23:42

Michael Sazonov

1,531
11
21

7

This was downvoted. I still find that this is useful when applying the style to only one element. This is also a good practice when sending HTML emails, in which case you can't create a CSS rule. – Lil' Bits Dec 17 '12 at 17:05
One shall never apply style within a html-document. – Ilias Bennani Nov 21 '16 at 10:43
@IliasBennani actually, there is no restriction on this in any standard. Furthermore, you cannot style any email without inline CSS. As well, it is useful for interactive elements with custom-styled/relative behavior/animation. – Michael Sazonov Nov 23 '16 at 10:58

How to remove borders around links in IE?

3 Answers3

Note on accessibility

Linked