Remove border around sprite image in Chrome
Solution 1
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.
Solution 2
you can use a base64 very small transparent image
<img class="share-link" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
Solution 3
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.
Solution 4
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.
Z with a Z
Updated on June 06, 2022Comments
-
Z with a Z almost 2 years
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>
-
Z with a Z over 12 yearsThere is a border regardless of focus. It remains constant.
-
Z with a Z over 12 yearsAhh.. Ok. This is making some sense.
-
kapa over 12 years+1 Exactly what I started to write. Use either an
img
, or another element with abackground-image
set. More on SO. In the OP's example, thebackground-image
shall be specified on thea
. -
Z with a Z over 12 yearsWorks perfect Scott. Thanks for the info :) I'm sure many folks will find this useful. Cheers.
-
Scott over 10 yearsThis is malformed CSS. The correct selector is
a img
nota image
-
Claudio Holanda over 10 yearsWrong CSS selector, and wrong answer. His problem is not the property
border
, but the "outline" (not the propertyoutline
too) that chrome draws to a image when there is nosrc
attribute on it. -
BrianLegg about 9 years2015 and this still works perfectly in Chrome and IE10. Thanks