Remove border on img tag with no src on Chrome

Question

I have an img tag with no src content:

<img class="logo" src="" alt="" />

I can't change the src content because it is automatically generated by my company framework.

This is my logo class:

.logo {
    background: url('img/logo.png') no-repeat center center;
    background-size: 70%;
    margin-top: 25px;
    border: 0;
    border-style: none;
}

But on Chrome, I get this strange border on my image. How can I remove that?

Some other css class might be adding the border. Try adding important to your border property. `border:0!important;` — Ozgur Sar, Nov 25 '20 at 12:48
Using Chrome Dev Tools, you can check the calculated values for the logo element and play with the values to check what causes the border. — Ozgur Sar, Nov 25 '20 at 12:58
https://stackoverflow.com/questions/6013071/removing-the-image-border-in-chrome-ie9 Check out this and try the 2nd answer by Randy. This solved many issues withr andom Borders in Chrome for me. Fooling chrome into thinking there is nothing and use padding to display the content. — Warden330, Nov 25 '20 at 13:03
It happens with any replacement for the logo img so it's not dependent on seeing the company logo @ozgur. — A Haworth, Nov 25 '20 at 13:03
Does this answer your question? [What's the valid way to include an image with no src?](https://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src) — 0stone0, Nov 25 '20 at 13:32

score 0 · Answer 1 · answered Nov 25 '20 at 12:56

0

Might be Outline or box shadow property

Try

.logo { 
   outline: none !important;
   box-shadow: none !important
}

answered Nov 25 '20 at 12:56

Vishal

235
1
15

Unfortunately, the problem persists – aseolin Nov 25 '20 at 13:02

score 0 · Answer 2 · answered Nov 25 '20 at 13:01

0

. logo {
   border: none;
}

or

. logo {
   border-color: transparent;
}

or

.logo {
   border: 0px solid transparent;

answered Nov 25 '20 at 13:01

score 0 · Answer 3 · answered Nov 25 '20 at 13:15

I'm posting this answer as a Javascript alternative to css solution (if any)

You can target the logo class img and change its src programmatically. This code should run after the logo has been added to DOM.

// Fix the img url here according to your real path    
document.getElementsByClassName[0]("logo").src="img/logo.png";

If there are more than one logo class on the page, the code should be modified accordingly though.

Remove border on img tag with no src on Chrome

3 Answers3