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

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: