title: Gap between border and image when border radius is added
body: <p>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.</p>
  
  <p>Issue is demonstrated in the below image.</p>
  
  <p><img src="https://i.stack.imgur.com/CAb2K.jpg" alt="enter image description here"></p>
  
  <p>And the css I'm using,</p>
  
  <pre><code>img {
      border: 3px solid #4CB7AC;
      height: 46px;
      width: 46px;
      border-radius:50%;
  }
  </code></pre>
  
  <p>Note that </p>
  
  <ul>
  <li>The image size is 46px X 46px. Not resized.</li>
  <li>And I HAVE to use <code>&lt;img&gt;</code> to get the image. Setting it as a background image is ruled out.</li>
  <li>Solution must be compatible with all browsers. Even IE8.</li>
  </ul>
  
  <p>Is there a way to remove that gap?</p>
  
  <p>EDIT
   <a href="http://jsfiddle.net/uW2Pa/4/" rel="noreferrer">JS Fiddle link</a></p>