Remove border around sprite image in Chrome

Question

First time using this technique, seems that regardless what attributes I try to assign the border will not go away in Chrome. Other browsers are fine. I've tried outline:none, border:0; etc, etc. Also tried adding a colored border around the image, and noticed the the black border was still there within the colored border. Doesn't seem to want to go away.

Work-around's or advice much appreciated.

.share-link {
display: block;
width: 41px;
height: 32px;
text-decoration: none;
background: url("link-icon.png");
}

.share-link:hover {
background-position: -41px 0;
}


<a title="Share this Link" href="#"><img class="share-link"></a>

Sorry for asking, but can that black border be part of the image itself by accident? — kapa, Feb 07 '12 at 08:17
@bazmegakapa exactly my thought, perhaps the image is smaller than 41x32px... — Christoph, Feb 07 '12 at 08:19
I asked myself this question too and verified to be accurate :P — Z with a Z, Feb 07 '12 at 08:28

score 43 · Accepted Answer · answered Feb 07 '12 at 08:29

43

It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.

If you don't want to place an image between the anchor tags, then don't use an image tag. It's not necessary to place anything between the tags.

Demo here.

answered Feb 07 '12 at 08:29

Scott

21,475
8
43
55

Ahh.. Ok. This is making some sense. – Z with a Z Feb 07 '12 at 08:32
+1 Exactly what I started to write. Use either an `img`, or another element with a `background-image` set. [More on SO](http://stackoverflow.com/questions/4335957/using-sprites-with-img-tag/4336431#4336431). In the OP's example, the `background-image` shall be specified on the `a`. – kapa Feb 07 '12 at 08:33
1

Works perfect Scott. Thanks for the info :) I'm sure many folks will find this useful. Cheers. – Z with a Z Feb 07 '12 at 08:40

score 9 · Answer 2 · answered Oct 31 '14 at 13:35

9

you can use a base64 very small transparent image

<img class="share-link"  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

answered Oct 31 '14 at 13:35

Francesco

1,128
12
22

score 3 · Answer 3 · answered Feb 05 '13 at 14:15

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;
}

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

2015 and this still works perfectly in Chrome and IE10. Thanks — BrianLegg, Feb 22 '15 at 05:12

score 1 · Answer 4 · answered Feb 07 '12 at 08:20

1

If your asking to get rid of the border which activates onfocus then:

*:focus {outline: none;}

or

.nohighlight:focus  {  outline:none;  }

This should get rid of the border.

answered Feb 07 '12 at 08:20

umbriel

723
1
7
22

2

There is a border regardless of focus. It remains constant. – Z with a Z Feb 07 '12 at 08:31

score 0 · Answer 5 · edited Dec 05 '17 at 18:06

My base64 embedded images kept showing a grey line around it no matter what I did. Using <div> instead of <img> worked for me.

BEFORE (wrong) I used:

in HTML:

<img class='message-bubble-small'>

in CSS:

img.message-bubble-small {
  background-image: url(data:image/png;base64,...);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  float: left;
}

AFTER I used:

in HTML:

<div id='message-bubble-small'>

in CSS:

#message-bubble-small {
  background-image: url(data:image/png;base64,...);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  float: left;
}

With the last example I have no more grey lines in Chrome.

score 0 · Answer 6 · answered Oct 18 '18 at 17:30

0

You can just put the "src" attribute blank that will fade the border

<img class="share-link" src="">

answered Oct 18 '18 at 17:30

Matheus Gomes

321
2
3

score -2 · Answer 7 · answered Jul 15 '13 at 09:17

-2

By default any image that is wrapped in a link will have a border around the image (similar to the way text is underlined). Removing the border is simple

a image {border: none} or a image {border: 0}

Since I never want to see the border around image links I usually set the above on every site I develop

answered Jul 15 '13 at 09:17

Reza ahmdi

1
1
2

This is malformed CSS. The correct selector is `a img` not `a image` – Scott Oct 25 '13 at 07:44
Wrong CSS selector, and wrong answer. His problem is not the property ```border```, but the "outline" (not the property ```outline``` too) that chrome draws to a image when there is no ```src``` attribute on it. – Claudio Holanda Dec 09 '13 at 20:58

Remove border around sprite image in Chrome

7 Answers7

Linked