Removing the image border in Chrome/IE9

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.

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

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