Removing image borders

Question

Am I going mad. I'm trying to remove the image border, but can't seem to shift it with this

HTML:

<img src="../_test.jpg" width="200" height="200" alt="Test">

CSS:

img {
    border: 0px;
    outline: none;
}

Live example

This appears to be browser-specific. Chrome adds the border to unloadable images. FF (and perhaps others) do not show the border. To correct, make sure that your image URL is valid. [jsFiddle](http://jsfiddle.net/szkuc/4/) — George Cummins, Jun 17 '13 at 20:19
It looks like this is impossible to do with broken images: http://stackoverflow.com/questions/13151340/how-to-remove-borders-around-broken-images-in-webkit — jake, Jun 17 '13 at 20:20
@Rob, will you verify that the border goes away when you use a valid image? [jsFiddle](http://jsfiddle.net/szkuc/4/) — George Cummins, Jun 17 '13 at 20:24

score 0 · Answer 1 · edited May 23 '17 at 10:32

There are javascript solutions to handle broken images.

You could also wrap it in a div and do some tricks (this requires a space before your alt text to show, as the "border" is within the padding area of the img). However, this is probably a bit excessive for just handling a broken image (fix your image path instead).

HTML

<div class="brokenImgBorderKill">
  <img src="../_test.jpg" width="200" height="200" alt=" Test">
</div>

CSS

img {
    border: 0px;
    outline: none;
}

.brokenImgBorderKill {
    display: inline-block;
    width: 198px;
    height: 198px;
    overflow: hidden;
}

.brokenImgBorderKill img {
    margin: -1px 0 0 -1px;
}

Removing image borders

1 Answers1