Question

Border is not removing in the below code, which is image sprite . I have tried some methods to remove the border using style and border 0 ,but no use .

<style>
img.home{width:40px;height:32px;
background:url(share.png) 0 0;
border-style: none;}
img.next{width:40px;
height:32px;background:url(share.png) -36px 0;
border-style:none;}
</style>
<a href="http://www.yahoo.com/">
<img class="home" border="0">
</a>
<img class="next" border="0"/>

JSFIDDLE

Answer 1

Images come with a default border, that only disappears when the image is downloaded. That image comes from the src attribute of the image. If no src is set, then the image won’t be downloaded, and the border will be forever there – your case exactly.

A normal img tag looks like this:

<img src="/something.jpg" />

yours looks like this:

<img />

You’re adding your image through css’s background-image. Not as it should be done. You can add a background image, but it’s usually for other purposes. (check the aside at the bottom).

Try removing the background image and placing the image location on the src attribute of the image. Like this:

<img class="next" src="/share.png" />

You’ll see the image has no border now.

Aside
When a background image is added to an img element, it’s usually to provide a placeholder image for when no img src is set. Think of avatars on the comments section of a blog.

Also
When creating a sprite, you can use divs ps ems etc. Remember, the background-image can be applied to any element!