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

I've done this effect with two divs using z-index.

Set your background image on mask to the red borders with the middle cut out (png), then use z-index to stack it above the picture div.

Should work cross browser, the only thing is it doesn't account for dynamic widths/height in the images, it assumes all images are the same. AND you're doing a request for that extra mask image.

Up to you.