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

I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:

css:

ins.noborder
{
    display:block;
    width:102px;
    height:86px;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

html

<ins class="noborder"></ins>

Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.

Answer 2

You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone. Try this

img:not([src]) {
    text-indent: 99999px !important;
}

Answer 3

it worked for me. It took days which made me crazy.

img.logo
{
    display:block;
    width:100%;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
}

Answer 4

If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">

Answer 5

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

Answer 6

In your img src tag, add a border="0", for example, <img src="img.jpg" border="0"> as per explained by @Amareswar above