How do I get rid of the default outline in the tag?

Question

<img class="image_cover" src = "" />

.image_cover {
    width:25px;
    height:25px;
    border-style:none;
    border: 0;
    box-shadow:none;
}

I'm demonstrating it in a fiddle here: jsfiddle

In Chrome Version 33.0.1750.152, I am seeing a box (border) over the <img> tag. I am trying to get rid off it.

I followed the input over here: Removing the image border in Chrome/IE9, and set the border, border-style, and box-shadow attributes, but I still see the border around it.

How do I fix this?

Border has value "none" meanwhile outline can be set to "0" – Hendra Nucleo Mar 28 '14 at 15:18 — Hendra Nucleo, Mar 28 '14 at 15:18

Martin Lantzsch · Answer 1 · 2014-03-28T16:12:42.743

4

Chrome automaticaly renders a border to img tags with an empty src attribute.

A workaround would be placing a transparent png or gif in this image tag.

edited Mar 28 '14 at 16:12

answered Mar 28 '14 at 15:19

Martin Lantzsch

1,851
15
19

score 2 · Answer 2 · answered Mar 28 '14 at 15:16

2

CSS

img {
    Border: none;
}

try this and it should remove any default borders

answered Mar 28 '14 at 15:16

Chris

435
7
19

1

Does not work. http://jsfiddle.net/H4TNw/10/ – Louis93 Mar 28 '14 at 15:35
1

@Louis93 it works when you have an image placed in the SRC. This then prevents any borders appearing on any other browser round the img – Chris Mar 28 '14 at 15:41

score 1 · Answer 3 · answered Mar 28 '14 at 15:19

1

It is because you don't have a source specified. Once you specify an SRC, this shouldn't be a problem any longer.

answered Mar 28 '14 at 15:19

Patrick Allen

2,148
2
16
20

score 1 · Answer 4 · answered Mar 28 '14 at 15:29

Like others have mentioned the border is there because the SRC is empty. If the src wasn't empty you could change the border using border:none. However this is happening because of default browser behavior on an <img> tag with no src which is why border:none has no effect.

If for whatever reason you want to have an empty src you could do this.. But I am not sure why you would want an image tag with no src

<img class="image_cover" src="" />

.image_cover {
    width:25px;
    height:25px;
    content: "";
}

DEMO:

http://jsfiddle.net/krishollenbeck/H4TNw/8/

Nice fix. This was not thought of on the duplicate question. — andyb, Mar 28 '14 at 16:00

score 0 · Answer 5 · answered Mar 28 '14 at 15:20

0

the outline shows up because you are not setting the src attribute to a valid image url.

answered Mar 28 '14 at 15:20

Bilal

429
1
3
11

score 0 · Answer 6 · edited Mar 28 '14 at 15:40

0

Getting rid of the outline is accomplished by making it transparent.

img{    
    border-color:transparent;
}

edited Mar 28 '14 at 15:40

web-tiki

99,765
32
217
249

answered Mar 28 '14 at 15:23

Sireesh Yarlagadda

12,978
3
74
76

Does this solution work ? – Mo. Feb 16 '16 at 10:48

How do I get rid of the default outline in the tag?

6 Answers6