Removing the image border in Chrome/IE9

css image google-chrome stylesheet border
Prasad picture Prasad · May 16, 2011 · Viewed 73k times · Source

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?

See attached screenshot:

Screenshot

Answer

Randy King picture Randy King · Feb 5, 2013

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.

Related questions

image moves on hover - chrome opacity issue

There seems to be an issue with my page here: http://www.lonewulf.eu When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome. My css: .img{ -ms-filter: "progid:DXImageTransform.Microsoft.…

Read More
content attribute of img elements

While inspecting the Chrome Dev tools, I noticed the following CSS fragment: img { content: url(image-src.png); } which works perfectly in Chrome (see Screenshot below). This allows me to define the src attribute of an <img> tag via …

Read More
Remove border around sprite image in Chrome

First time using this technique, seems that regardless what attributes I try to assign the border will not go away in Chrome. Other browsers are fine. I've tried outline:none, border:0; etc, etc. Also tried adding a colored border around …

Read More