Today is friday and this is a fun question (and a real problem). I am using border around the image but if the image url is not valid, the border appears around the alt text and looks kind of ugly. How to remove it using CSS?

<a href="#">
   <img src="" style="border:1px solid black" alt="Remove border from this alt text" />
</a>

I don't want to overkill it with server side script or jQuery. Interested in CSS. If no CSS solution is available then other solutions are wele.

My actual server side script looks like this

If Not String.IsNullOrEmpty(photoURL) Then
   photoUrl2="<img src="..." style="border:1px solid #000" alt="BMW for sale">"
end if

jsfiddle

Today is friday and this is a fun question (and a real problem). I am using border around the image but if the image url is not valid, the border appears around the alt text and looks kind of ugly. How to remove it using CSS?

<a href="#">
   <img src="http://badsrc./blah" style="border:1px solid black" alt="Remove border from this alt text" />
</a>

I don't want to overkill it with server side script or jQuery. Interested in CSS. If no CSS solution is available then other solutions are wele.

My actual server side script looks like this

If Not String.IsNullOrEmpty(photoURL) Then
   photoUrl2="<img src="..." style="border:1px solid #000" alt="BMW for sale">"
end if

jsfiddle

• javascript
• jquery
• asp
• css
• vb

• friday hmm!, okay, give it a black background and a white color and it's gone ;) – G-Cyrillus Commented Jan 17, 2014 at 21:08
• How cum? jsfiddle? :) That means black border will be gone from images as well if image is a valid url. Wont solve the problem – TheTechGuy Commented Jan 17, 2014 at 21:09
• style="border:1px solid #000;background:#000;color:white" it's a silly friday answer ... i go 86 heu, nop border stands outside o( – G-Cyrillus Commented Jan 17, 2014 at 21:11
• codepen.io/anon/pen/ayEwz – G-Cyrillus Commented Jan 17, 2014 at 21:18

5 Answers 5

You can use onerror and set the border

<a href="#">
 <img src="http://badsrc./blah" onerror="this.style.borderWidth=0" style="border:1px solid black" alt="Remove border from this alt text" />
</a>

It would be better to not use inline styles and use classes

jsfiddle

Use .error(), it binds an event handler to the "error" JavaScript event.

$("img").error(function () {
    $(this).css('border', 'none');
})

DEMO

<a href="#">
 <img  id="myImage" src="http://badsrc./blah" style="border:1px solid black" alt="Remove border from this alt text" />
</a>

<script>
    var image = document.getElementById('myImage'); // or select based on classes
    image.onerror = function(){
      // image not found or change src like this as default image:
       image.style.border = "none";
    };
</script>

here is your solution with javascript.

Since you are setting it via server side, the correct thing to fix this on the server side, not in CSS or JavaScript. All you have to do is change your code to this:

photoUrl2 = String.Format("<img src='...' style='border:{0}' alt='BMW for sale' />",
                          If(String.IsNullOrEmpty(photoURL), 
                             "none", 
                             "1px solid #000"))

I know it's an old question but here is CSS only solution using pseudo elements

img:after {  
  content: attr(alt);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

 <img src="//placehold.foo/200x200" alt="Remove border from this alt text" />