How can I remove the border around an image without a source?

<img src="" width=50 height=50>

The broken image placeholder and subsequent border shown above is a browser feature and can't be styled.

You can work around this limitation by hiding the image or if you need it for layout you can use a placeholder image or transparent pixel.

Hide the image

img[src=""] { display: none; }

Using a placeholder image or transparent pixel

img[src=""] { content:url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); }

What I could suggest is in case not having a src="" remove it and you can

img {
    display: none;
}


img[src] {
   display: block;
 }

or if you know like the url contains some special word, like http you can do:

img[src*="http"] {
    display: block;
}

Related