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.

Answer 1

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

See jsFiddle

Answer 2

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

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

Answer 3

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.

Answer 4

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;
    }

Answer 5

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