Removing the image border in Chrome/IE9

Question

I am trying to get rid of the thin border that appears for every image in Chrome & IE9. I have this CSS:

outline: none;
border: none;

U

Answer 1

First create an image type PNG transparent with photoshop in mini size. Then in your class please add:

content:url("url of your blank png");

Answer 2

inline css

<img src="logo.png" style="border-style: none"/>

Answer 3

Add attribute border="0" in the img tag

Answer 4

I fix it using padding style:

#picture {
    background: url("../images/image.png") no-repeat;
    background-size: 100%;
}

.icon {
    height: 30px;
    width: 30px;
    padding: 15px;
} 

The border is disappearing, while you are increasing padding value. Find your own value.

Answer 5

using border="0" is an affective way, but you will need to add this attribute for each image.

i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.

$(document).ready(function () {
        $('img').each(function () {
            $(this).attr("border", "0");
        });
    });

Answer 6

If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:

.container { overflow: hidden; height: 200px; width: 200px }

.container img { width: 100%; height: 100% }

.container img[src=''],
.container img:not([src]) {
  width: 102%;
  height: 102%;
  margin: -1%;
}

This will make the border be hidden in the container's overflow and you won't see it.

Turn this:

Into this: