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.

img {border-radius: 10px; border:3px solid red}

See this example in Google Chrome or Opera or iPad http://jsfiddle.net/4PLUG/2/show/

Borders are fine in Firefox.

and in IE9 border edges are fine but it has a different problem. it shows some space between border and images

How to get the result like Firefox in all other browser?

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/

Answer 2

/* just make sure you're including border radius for all browsers rendering engines */

.img-border{
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border:3px solid red;
}

Answer 3

all browsers have different CSS capabilities, and handle them differently.

if you want the corners to look exactly the same in all browsers, you'll just have to put the curves in the actual image, and not rely on CSS.

An alternative is to use a background image on a div instead, which may get better clipping.