Removing default border around an image - Chrome browser

Question

I can't believe I ran on this problem for the first time. I have searched lot of other similar question on SO regarding the same issue, but none of them worked for me.

I have a img tag with a class attribute under anchor tag.

So my html looks like:

<ul id="racing-menu" class="accordion-menu list-unstyled">
  <li>
    <a id"something" name class"something">
      <img class="icon_71">
    </a>
  </li>
</ul>

CSS

.icon_71 {
  background: url(../../cms/images/sports/something.png) no-repeat;
  width: 36px;
  height: 22px;
  margin: 0 10px 0 0;
  float: left;
}

I tried the following solutions in order to avoid default border on Chrome browser

1)border: 0 2)outline: none 3)changing img class to img id

4)Setting

a img {
  border:none
} 

a img {
  border:0
}

easwee · Accepted Answer · 2014-02-28T13:56:12.170

18

Your <img> tag does not have a src attribute since you are setting background with css.

<img class="icon_406">

This is invalid html - if you intend to implement icons through css use <span> or something similar that does not require src attribute by specification. Or load the image icons through src attribute of <img> element.

Chrome displays a border since it cannot find the image (same as if the src had a broken link inside) - but the icon shows since css is still able to apply the class styling to the empty <img> element.

edited Feb 28 '14 at 13:56

answered Feb 28 '14 at 13:50

easwee

15,757
24
60
83

great. I replaced the img tag to span in my JS and it worked flawlessly. – 0xburned Feb 28 '14 at 13:59
@Nish - I believe you :) - Accept answer if it solved your problem. – easwee Feb 28 '14 at 14:02
"Chrome displays a border since it cannot find the image" that was a key statement. Indeed I just added image in the code and borders now are gone – CodeToLife Jun 08 '18 at 17:56

score 5 · Answer 2 · answered Feb 28 '14 at 13:58

5

Replace IMG tag width DIV, and it should work :)

answered Feb 28 '14 at 13:58

Andres Orav

61
2

as you can see in my original post. I have already tried that solution. – 0xburned Feb 28 '14 at 13:59
I tried this on your site, using google developer toolbar and worked like a charm :) Here's a screenshot: http://i.imgur.com/iK57iFG.png – Andres Orav Feb 28 '14 at 14:15
My mistake. I thought you wanted to say replace with My mind was occupied :-) – 0xburned Feb 28 '14 at 14:25

score 1 · Answer 3 · answered Feb 28 '14 at 13:47

1

Try to replace 'a img' with just 'a'.

Means add the following css:

a img {
  border: none;
}

You can also try some bad stuff to test if the border is the problem:

* {
   border: none !important;
}

But i don't recommend the second code because it may generate other issues, the second code is just thaught to test if the border is the problem.

answered Feb 28 '14 at 13:47

ReeCube

2,545
17
23

this didn't work. However replacing img to span tag worked fine since I was showing image through CSS not with src attribute. – 0xburned Feb 28 '14 at 14:01

score 0 · Answer 4 · answered Sep 30 '18 at 21:07

You can use <img>, but set the src property to an empty string.

// Get an HTMLImageElement anyway you want.
document.querySelectorAll('img').forEach(function(img) {
  // This can also be used to abort an image load.
  img.src = '';
});

Tested in Chrome only.

Removing default border around an image - Chrome browser

4 Answers4

Linked