Gap between border and image when border radius is added

Question

I have an image with a border radius of 50% and a 3px border around it. My problem is when the border radius is given, there is a 1px gap between the image and the border.

Issue is demonstrated in the below image.

And the css I'm using,

img {
    border: 3px solid #4CB7AC;
    height: 46px;
    width: 46px;
    border-radius:50%;
}

Note that

• The image size is 46px X 46px. Not resized.
• And I HAVE to use <img> to get the image. Setting it as a background image is ruled out.
• Solution must be compatible with all browsers. Even IE8.

Is there a way to remove that gap?

EDIT JS Fiddle link

Denham

Can you post a jsfiddle example? – Unpaid

Are you expecting border-raidus to work in IE8? – Invent

46x46 is a small size, I don't think almost people can see the gap at normal level of zoom. So it's not really a serious problem. If it's important to you, you can try placing some overlaying div to cover the gap. – Been

I don't see the issue even when I zoom : jsfiddle.net/webtiki/5Y5mR – Jerad

ie8 has no border-radius support unless you use something like this: css3pie.com/documentation/pie-js – Liturgical

i see no gap too: jsfiddle.net/omegaiori/9rXdF it must be something "around" that img that produces the gap – Liturgical

JS Fiddle added. As for IE8 support for border radius is not the main concern, but the gap appearing in all the other browsers when the border radius is given. This is most visible when the background color is black or some other dark shade. – Denham

@ShanthaKumara In your fiddle your image has a small black border as some of the pixels are half black half blue in order to make the edge appear smoother, anti-aliased. Try making the image square, filled all the way. – Invent

@Invent Even if you change the image the problem is still there. Note that the problem is visible on images which are light when the background is a darker shade. Meaning that there is a space between the border and the image. – Denham

Answer 1

Just Add Background color same as your Border color and it's fixed.

See jsFiddle

Establishmentarian

what about background-image ? – Ultraviolet

This is a trick, not a solution. – Warily

Answer 2

The background-color suggestion works great, but if you're in a situation where a background color would be less than ideal (for example a PNG image with a bt of transparency) then you might be able to use background-clip: border-box;

See background-clip on MDN for more details about that property.

Konstanz

Answer 3

Try doing it like this :

img {
    border: 3px solid #4CB7AC;
    height: 46px;
    width: 46px;
    -webkit-border-radius: 46px 46px 46px 46px;
    border-radius: 46px 46px 46px 46px;
}

Also, for IE8 and lower try using Conditional Comments to replace the border radius and add a generic .png image

    <!--[if lte IE 8]>
Image source 
 <![endif]-->

UPDATE

That GAP you see is a "bug" of using border-radius, you can also try fixing it by adding an image background color same as the border color:

img {
        border: 3px solid #4CB7AC;
        height: 46px;
        width: 46px;
        -webkit-border-radius: 46px 46px 46px 46px;
        border-radius: 46px 46px 46px 46px;
        overflow: hidden;
        background-color: #4CB7AC;
    }

Establishmentarian

The image is dynamic. To be more clear the image is a user profile image the users are going to upload. So we can't have the image be the same color as the border. – Denham

You will not have the image the same color, the background color will be placed under your image, therefore removing the gap, i posted another answer with a working jsFiddle so you can wee what I mean. – Establishmentarian

Answer 4

Adding font-size:0 to img should fix your problem.

Anabolite

hacks are NOT solutions – Aftermost

Answer 5

without overflow:hide use LEFT and Top also height equal to parent

      min-height: 52px;
      bottom: 1px;
      left: 0.5px;

Acclimate

Answer 6

In this case, you can try this at the top of your CSS file:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

It will remove that gap. To keep picture from shrinking you can add to your img class this CSS rule: object-fit: cover;.

Farce

Answer 7

First of all you should add a class to your img tag:

<img src="/image.png" class="img-author">

Otherwise, it will change all images in your website.

You can fix this small gap using the "object-fit" css attribute.

img.img-author{
    border: 3px solid #4CB7AC;
    height: 46px;
    width: 46px;
    border-radius:50%;
    object-fit: contain;
}

<img src="https://www.gravatar.com/avatar/a5c9fa2dbf60eb47b3c0e17eaa43d889?s=64&d=identicon&r=PG&f=1" class="img-author">

Kaifeng