Remove Border Around Sprite Image in Chrome

Remove border around sprite image in Chrome

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.

html/css - using sprite with img tag - how to remove the outline in Chrome?

If you can absolutely position the image, you can use the sprite directly in the foreground using the CSS clip property.

Removing default border around image

Finally found the solution!

I originally had it as an img containing a class that referenced the image in our sprite sheet. By changing the img tags to a div and keeping the original reference, the borders were removed and the sprite correctly displays.

How remove border around image in css?

Try this:

img{border:0;}

You can also limitate the scope and only remove border on some images by doing so:

.myClass img{border:0;}

More information about the border css property can by found here.

Edit: Changed border from 0px to 0. As explained in comments, px is redundant for a unit of 0.

chrome/safari display border around image

Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.

How do I remove the gray border that surrounds background images?

So, you have an img element that doesn't have a src attribute, but it does have a background-image style applied.

I'd say that the gray border is the 'placeholder' for where the image would be, if you'd specified a src attribute.

If you don't want a 'foreground' image, then don't use an img tag - you've already stated that changing to a div solves the problem, why not go with that solution?

border-image doesn't render block's interior background in chrome

I dont know why it is caused , probably a chrome bug.

Here is a fix however.

Add this to your .box css

-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: white;

This will add a white background colour and clip it to its contents (including the padding).
More info on background-clip can be found here.

---

Working Example.

http://jsfiddle.net/blowsie/u8ctc/

---

Related Topics