Add rounded corners to a rectangle raster image

Question

What is the best way to make something like a mask with rounded corners for an image using CSS/JS/HTML? So, I need to add rounded corners to a rectangle image. I thought about adding 4 graphic elements like this one above the image at its corners to hide some little parts of the image. Here red color is, for example, for using on the red background page, and the element is for right top corner. The problem with this solution is that I can't use it on complex backgrounds, like gradients or other non-flat fill background. I know there is a masking feature that can be used in FireFox but I need some more generic solution that will work in other browsers well too. Thanks.

Answer 1

You should be using CSS border-radius for this (as described in another answer). It does work for images.

What the previous answer missed is that you can support it in CSS in all browsers, including IE6/7/8 using a wonderful little hack called CSS3Pie.

Answer 2

The best and simplest way is to use the CSS3 border-radius property:

.box {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

It works in all modern browsers apart from IE8 (works in the new IE9 though).