Removing the image border in Chrome/IE9

Question

I am trying to get rid of the thin border that appears for every image in Chrome & IE9. I have this CSS:

outline: none;
border: none;

Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?

body {
    font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
    outline: none;
    border: none;
}
.icon {
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -48px -144px;
    background-image: url(theme/images/ui-icons_0078ae_256x240.png);
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}

<h1>Dashboard <img class="icon" border="0"></h1>

See attached screenshot:

Screenshot

"But the border as shown in the image still appears." Is there a screenshot? — Marcel, May 16 '11 at 07:51
I'm not entirely sure I see the actual issue. Your screen shot shows some dashes under the word Dashboard, but those dashes look an awful lot like they are actually part of the icon you are displaying. If that's true, CSS/Javascript/Whatever isn't going to help. You'll need to modify the actual image. — NotMe, Feb 10 '12 at 22:55
@ChrisLively I think he means the border around the question mark — EaterOfCode, Jan 21 '13 at 12:43
I found the following solution more elegant: http://stackoverflow.com/questions/5743083/strange-border-on-img-tag — Roberto Alarcon, Oct 25 '13 at 06:27

score 56 · Answer 1 · edited Aug 01 '17 at 15:06

56

It's a Chrome bug, ignoring the "border:none;" style.

Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.

So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...

#dlbutn {
    display:block;
    width:0px;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

Voila! Works everywhere and gets rid of the outline/border in Chrome.

edited Aug 01 '17 at 15:06

Cœur

37,241
25
195
267

answered Feb 05 '13 at 14:21

Randy King

591
4
2

This is what actually gets to the bottom of the problem. Thanks – Constanta Mar 11 '13 at 14:45
Helped a ton, I didn't realize I could use this method until I made my own, not as good solution. – aaron-coding Aug 14 '15 at 20:54
3

I noticed a tiny little box still showing up (Almost not visible) when using this method. It's a 1x1 border that is still there. When looking closely, does anyone else still see this, using this method? & What would be the fix for this? – aaron-coding Aug 18 '15 at 21:40
@aaron-coding - yes I see this too. however I think that @randy-king has the correct solution - I have modified it slight to use with generic classes ```.borderFix { display: block; width: 1px !important; height: 1px !important; outline: none; padding: 0px; margin: -4px; background-image:none !important; background-repeat:no-repeat; }``` – rwcorbett Mar 04 '16 at 17:21
@arron-coding: In my situation, 'overflow: hidden' was needed in addition to the other settings in order to get rid of the small box in Chrome. – CyberMonk Jan 17 '17 at 01:52

score 53 · Accepted Answer · edited Feb 07 '17 at 04:50

53

Instead of border: none; or border: 0; in your CSS, you should have:

border-style: none;

You could also put this in the image tag like so:

<img src="blah" style="border-style: none;">

Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:

Use a <div> instead of an <img> element (effectively creating an element with a background image is all you are doing anyway, the <img> tag really isn't being used)
If you want/need an <img> tag use Randy King's solution below
Define an image src

edited Feb 07 '17 at 04:50

Web_Designer

72,308
93
206
262

answered Jan 24 '12 at 09:03

Zach

1,964
2
17
28

1

This fix didn't work for me on the latest version of Chrome, however Randy King's fix did work. Thanks! – Kevin Dark May 10 '13 at 10:09
hmm.. I have the latest version of chrome and haven't seen this not work if it is not being overwritten by something a stylesheet. Randy King's solution will definitely work no matter what and is great for images that you will use often on the website but it is a pain to write it for every image. I do not think that chrome puts a border by default because if I have a html file with an image I cannot get an "unintentional" border to show up no matter what I wrap it in. Makes me feel like it is a css rule somewhere in one of your stylesheets that you need to get rid of or overwrite – Zach May 10 '13 at 12:13
not saying I am for sure correct haha.. just extremely curious – Zach May 10 '13 at 12:17
This is my jsFiddle quick test. View it in Chrome (obviously) :) http://jsfiddle.net/darkkevind/vtNTa/ – Kevin Dark May 10 '13 at 16:04
Ahh yup, I was a little off on what was being asked. If you set an image src it will go away but can I suggest using a div instead of an img here? It will work the same if you are trying to fill that space with a background image. What was the application for having an img tag with no src? alt/title tags? – Zach May 10 '13 at 16:34
actually alt tags wont work on an image tag with no src so I guess I would suggest a using a div with a background image or just adding a src to the image. – Zach May 10 '13 at 16:42
The reason for it being an IMG element was because if (in the result set of a search) there was no image to assign to the src yet it applied a class to the background which mapped to an icon (file type icon) in a png sprite. I think the dev was trying to use the same element with this as he could have swapped out a DIV and an IMG element based on the result which would have been better...and easier... – Kevin Dark May 10 '13 at 17:01
1

Gotycha, Not sure how I got up votes on this but apparently it fixed a different issue for some people haha. I edited my answer. – Zach May 10 '13 at 18:39
I had a placeholder with no src.. fixed for me, tx! – ptim Nov 22 '13 at 01:03

score 18 · Answer 3 · edited Nov 05 '14 at 22:47

18

For anyone who wants to get rid of the border when the src is empty or there is no src just use this style:

IMG[src=''], IMG:not([src])      {opacity:0;}

It will hide the IMG tag completely until you add a src

edited Nov 05 '14 at 22:47

senshin

10,022
7
46
59

answered Nov 05 '14 at 22:39

John

181
1
2

1

This fix is fantastic for Chrome when lazy loading images. Thank you! – Tim Bowen Feb 09 '15 at 18:20
Great answer, upvoted. If you also want to show your placeholder image while it is loading, you can checkout my answer, I used some of the code from here. – aaron-coding Aug 14 '15 at 19:51

score 6 · Answer 4 · answered May 16 '11 at 04:22

6

Add attribute border="0" in the img tag

answered May 16 '11 at 04:22

Amareswar

2,048
1
20
36

Thanks. But I am already doing that using jQuery. Pl see the second line of the code snippet, where the img tag already has a border="0" attribute – Prasad May 17 '11 at 14:32

score 4 · Answer 5 · edited Feb 07 '17 at 05:24

4

If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">

edited Feb 07 '17 at 05:24

Web_Designer

72,308
93
206
262

answered Jul 09 '15 at 13:11

code19

75
4

this gif is a tad bit shorter data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 – xer21 May 03 '18 at 19:03

score 3 · Answer 6 · answered Aug 14 '15 at 19:48

If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:

.container { overflow: hidden; height: 200px; width: 200px }

.container img { width: 100%; height: 100% }

.container img[src=''],
.container img:not([src]) {
  width: 102%;
  height: 102%;
  margin: -1%;
}

This will make the border be hidden in the container's overflow and you won't see it.

Turn this:

Into this:

It's a very nice fix, if both opacity and width/height can't be set to 0. — kwiat1990, Aug 07 '18 at 13:26

score 2 · Answer 7 · answered Feb 14 '13 at 15:18

I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:

css:

ins.noborder
{
    display:block;
    width:102px;
    height:86px;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

html

<ins class="noborder"></ins>

Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.

awesome solution. thanks for thinking that one up - works. I did make one change: `display: inline-block;` My tag is — tim, Mar 22 '13 at 20:11

score 1 · Answer 8 · answered Aug 22 '13 at 06:22

1

inline css

<img src="logo.png" style="border-style: none"/>

answered Aug 22 '13 at 06:22

score 1 · Answer 9 · answered Jan 03 '17 at 03:33

1

You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone. Try this

img:not([src]) {
    text-indent: 99999px !important;
}

answered Jan 03 '17 at 03:33

Hoang Trung

1,979
1
21
33

score 1 · Answer 10 · answered May 16 '11 at 07:45

1

In your img src tag, add a border="0", for example, <img src="img.jpg" border="0"> as per explained by @Amareswar above

answered May 16 '11 at 07:45

doodoodukes

148
3
12

Thanks. But I am already doing that using jQuery. Pl see the second line of the code snippet, where the img tag already has a border="0" attribute – Prasad May 17 '11 at 14:33
Thanks Amareswar. This is what you mean right? Do I need to close the image tag or something? – Prasad May 24 '11 at 15:13

score 1 · Answer 11 · answered Feb 10 '12 at 22:49

using border="0" is an affective way, but you will need to add this attribute for each image.

i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.

$(document).ready(function () {
        $('img').each(function () {
            $(this).attr("border", "0");
        });
    });

score 0 · Answer 12 · answered Mar 04 '14 at 19:54

0

I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;

answered Mar 04 '14 at 19:54

Zerato

683
9
18

score 0 · Answer 13 · answered Mar 04 '16 at 17:30

same as what @aaron-coding and @randy-king had - but just a more generic one to hide image border before they are loaded (i.e. with lazy-load.js or something

(apparently I can't do a code block in my original comment)

.lazy-load-borderFix {
  display: block;
  width: 1px !important;
  height: 1px !important;
  outline: none;
  padding: 0px;
  margin: -4px;
  background-image:none !important;
  background-repeat:no-repeat;
}

score 0 · Answer 14 · answered Nov 05 '16 at 22:44

I fix it using padding style:

#picture {
    background: url("../images/image.png") no-repeat;
    background-size: 100%;
}

.icon {
    height: 30px;
    width: 30px;
    padding: 15px;
}

The border is disappearing, while you are increasing padding value. Find your own value.

score 0 · Answer 15 · answered May 26 '18 at 23:09

0

it worked for me. It took days which made me crazy.

img.logo
{
    display:block;
    width:100%;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
}

answered May 26 '18 at 23:09

vahid sabet

485
1
6
16

1

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others. – Tim Diekmann May 26 '18 at 23:32

score 0 · Answer 16 · answered Sep 06 '19 at 01:21

0

the solution is to set the outline style to none (i.e.) outline:none, it's work with Me

answered Sep 06 '19 at 01:21

Farid Habita

31
5

score 0 · Answer 17 · edited Sep 17 '19 at 11:13

0

First create an image type PNG transparent with photoshop in mini size. Then in your class please add:

content:url("url of your blank png");

edited Sep 17 '19 at 11:13

Dharman

30,962
25
85
135

answered Sep 17 '19 at 11:12

Amin Karimi

73
1
9

score -1 · Answer 18 · answered Sep 10 '15 at 14:34

That happens because you are using an img tag with no src attribute. The solution is puting the image into a div. Something like that:

<style>
         div#uno{
            display:block;
            width: 351px;
            height: 500px;
            background: url(especificaciones1.png) no-repeat;

         }
         div#dos{
            display:block;
            width: 612px;
            height: 500px;
            background: url(especificaciones2.png) no-repeat;
         }

</style>
<div class="especificaciones">
   <div id="uno" class="imag1"></div>
   <div id="dos" class="imag2"></div>
</div>

Sometimes an image *has* to be used with the img element. This answer does not help us needing to use an img element. — basickarl, May 23 '16 at 14:00

Removing the image border in Chrome/IE9

18 Answers18

Linked

Related