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

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).