Search code examples
cssimagegoogle-chromestylesheetborder

Removing the image border in Chrome/IE9

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;

Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?

body {
    font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
    outline: none;
    border: none;
}
.icon {
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -48px -144px;
    background-image: url(theme/images/ui-icons_0078ae_256x240.png);
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>

See attached screenshot:

Screenshot

Solution

  • 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