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

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

• javascript
• html
• css
• image
• transparency

• What browsers must you support? There's some CSS solutions out there that work with most modern browsers, but if you also need IE6/7 they won't work probably.. – Stephan Muller Commented Sep 21, 2010 at 9:41

5 Answers 5

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.

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

This is something that's difficult to get right in one browser, let alone all the mon ones. I suggest you do your processing on the server side. If you're working with PHP, I know it has a built in image library that can work with semi-transparent png's. That's your best bet. Simply "crop" it once and save it on the server's file system. Look for an equivalent library if you're not using PHP.

(By "crop" I mean add the rounded corners with a nice alpha blending effect fading to a transparent background).

You can always look at using the nifty corners if you need it to work in older browsers also.

Or you can use the css border-radius as mentioned above, and just accept that in IE6/7/8 it will be square.

the jQuery plugin lc_roundz should do the job dynamically - even if you want the corners to be transparent (e.g. for use on plex backgrounds, ...).

$("image").lc_roundz({  
radius: 20,  // corner-radius  
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original  
newid: "%oid_after_lc_roundz",      // the new ID for the canvas object. %oid will be replaced with the id of the original object  
width: -1,                                                           // -1 uses the original image's width  
height: -1,                    // -1 uses the original image's width  
replace: false,                                          // boolean to decide whether the original should be removed from the DOM  
corner_color: [0,0,0,0]                     // this means TRANSPARENT ... R,G,B,alpha [0-255] each  
});