html - 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

Answer 1

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

See jsFiddle