How to remove borders around broken images in webkit?

Question

Can anybody advise me on this? WebKit browsers keeps on putting a gray 1px border around disabled images. The reason I need this removed is for email optimization for when email clients have images disabled. Works fine in Firefox, but WebKit browsers keep showing the border.

I have tried border:none !important everywhere including inline, but Chrome/Safari are being stubborn.

Edit: Here is sample html with inline css

<img style="outline:none;text-decoration:none;display:block;border:none;-webkit-border:0;" border="0" src="images/rm_bnk.gif" width="10" height="10" alt="test" />

Answer 1

Amit's answer is just great, but a small advice: use visibility: hidden; instead of display: none;

img:not([src]) {
   visibility: hidden;
}

• so you could save img block size and positioning of other elements. its usefull in most cases, i use it on my sites with images lazyload and show just blank block before the image loads.

Answer 2

If img src is not present or broken then use below css code

img:not([src]){ display:none; }

this css hide image till img src is not loaded completely.