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" />

Do you mean something like: table, img {-webkit-border:0 !important;} ? Still not working. — Van Nguyen, Oct 31 '12 at 04:39

score 23 · Answer 1 · edited Jan 11 '19 at 09:06

23

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.

edited Jan 11 '19 at 09:06

l2aelba

21,591
22
102
138

answered Dec 10 '15 at 15:22

kabantejay

344
2
5

Thank you for this! This is the only thing that worked for me :) – Michael Mar 25 '16 at 22:44
2

This is a great solution when using lazy loading. – David Refoua Sep 30 '16 at 20:11

score 8 · Answer 2 · answered Oct 28 '15 at 09:26

8

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.

answered Oct 28 '15 at 09:26

Amit

827
10
17

Thanks, but how do we inline pseudo styles? – Van Nguyen Nov 06 '15 at 03:43

score 6 · Accepted Answer · edited Nov 27 '13 at 11:03

There is no way to remove it but I wrapped the image in an element that has overflow hidden property in its styles.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hide Broken Image border</title>
  <style>
    body{
      background-color:azure;
    }
    .image-container{
      width:100px;
      height:100px;
      overflow:hidden;
      display:block;
      background-color:orange; /*not necessary, just to show the image box, can be added to img*/
    }
    .image-container img{
      margin:-1px;
    }
  </style>
</head>
<body>
  <span class="image-container">
    <img src="path-to-image" alt="I'm Broken :(" width="102" height="102">
  </span>
</body>
</html>

Take a look at this bin http://jsbin.com/OpAyAZa/1/edit

Nice one, let me test it across email clients – Van Nguyen Jun 04 '14 at 23:36 — Van Nguyen, Jun 04 '14 at 23:36

Scott Hillson · Answer 4 · 2012-10-31T05:20:25.153

3

Browsers don't seem to really give you a way to remove that border. Your simplest solution is to change your img to a div and apply the image as a background.

That way, if there's no src, you won't get the broken image icon and border.

Update: Microsoft Outlook makes things difficult, and the cure is almost worse than the disease: vector markup language, shape elements, imagedata elements, etc. If you google around you'll see how to use them http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

Outlook users might just have to go without the image so that you can call it a day.

edited Oct 31 '12 at 05:20

answered Oct 31 '12 at 04:49

Scott Hillson

900
1
12
30

Yeah have thought of this, but emails don't really like background images (outlook is the main culprit for this) – Van Nguyen Oct 31 '12 at 04:50
Cool, I will accept this for now, was hoping for some kind of css hack to override webkit default css. – Van Nguyen Nov 05 '12 at 06:45

score 0 · Answer 5 · answered Oct 31 '12 at 04:47

0

Try using some JavaScript to remove the broken image. Thats the only way

var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++) {
    var self  = images[i];
    self.onerror = function () {
        self.parentNode.removeChild(self);
    }
}

Because rendering of broken image varies from browser to browser and it could not be altered.

P.S: onerror will fire when the image is not loaded

answered Oct 31 '12 at 04:47

naveen

53,448
46
161
251

1

Thanks, but this is for emails so javascript is not available. – Van Nguyen Oct 31 '12 at 04:48
then try hilsons solution. thats a better idea – naveen Oct 31 '12 at 04:50

score -1 · Answer 6 · edited Sep 03 '17 at 00:30

-1

You can try this code to remove borders around broken images in webkit.

    var images = document.getElementsByTagName("img");

for (i = 0; i < images.length; i++) {
    var self  = images[i];
    self.onerror = function () {
        self.parentNode.removeChild(self);
    }
}

edited Sep 03 '17 at 00:30

Martijn Pieters

1,048,767
296
4,058
3,343

answered Jan 13 '17 at 05:46

Pi Technologies Pvt. Ltd

1
1

How to remove borders around broken images in webkit?

6 Answers6

Linked