How to get perfect border radius on images in all browsers?

Question

Currently I\'m getting like this in Chrome, Safari, Mobile Safari and Opera. edges are rough.

<         


        

Answer 1

You can give extra div to your img tag like this:

body {padding:100px}

img {
   vertical-align:bottom;
    position:relative;
    z-index:-1;
}
div{
    overflow:hidden;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border:3px solid red;
    display:inline-block;
}

http://jsfiddle.net/4PLUG/4/