Removing the image border in Chrome/IE9

Question

I am trying to get rid of the thin border that appears for every image in Chrome & IE9. I have this CSS:

outline: none;
border: none;

U

Answer 1

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:

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
  instead of an element (effectively creating an element with a background image is all you are doing anyway, the tag really isn't being used)
• If you want/need an tag use Randy King's solution below
• Define an image src