title: How to get perfect border radius on images in all browsers?
body: <p>Currently I'm getting like this in <strong>Chrome</strong>, <strong>Safari</strong>, <strong>Mobile Safari</strong> and <strong>Opera</strong>. edges are rough.</p>
  
  <pre><code>img {border-radius: 10px; border:3px solid red}
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/brCuP.jpg" alt="enter image description here"></p>
  
  <p>See this example in <strong>Google Chrome</strong> or <strong>Opera</strong> or <strong>iPad</strong> <a href="http://jsfiddle.net/4PLUG/2/show/" rel="noreferrer">http://jsfiddle.net/4PLUG/2/show/</a></p>
  
  <p>Borders are fine in <strong>Firefox</strong>.</p>
  
  <p>and in <strong>IE9</strong> border edges are fine but it has a different problem. it shows some space between border and images</p>
  
  <p><img src="https://i.stack.imgur.com/LpYSS.jpg" alt="enter image description here"></p>
  
  <p><strong>How to get the result like Firefox in all other browser?</strong></p>