Curved corners on images using CSS

Rounded corners on block elements is one thing.  Rounded corners on images is something completely different.

There are different techniques... but none are perfect, so the best solution depends on your context.
We need to know if your images must be displayed "inline" and we also need to know if the size of your images is constant.

The most reliable technique is to use some graphics library (like ImageMagick) to add the rounded corners to the image file.
You can do that when the image is uploaded.  But that goes against content/presentation separation if you consider the rounded corners beeing part of the presentation and the image beeing part of the content.
Or you can do it when the image is requested, but that will use processing time for each request.

Another technique is to use absolute/relative positioning to position your round masks in the corners of the image.  But that won't work on inline images... using an inline table should work though.  Anyway, all that adds a lot of overhead.

If the size of the image is constant, you can use a round mask as image and your original image as background-image.  That should work fine.

Note that CSS3 does not define rounded corners, but only defines border-radius Mozilla already has an equivalent (-moz-border-radius).
That does not mask your image, the radius is just applied to the border in the background leaving the image with square corners.

Check this out... http://pro.html.it/esempio/nifty/

It's possible to do rounded corners in CSS with a bit of JavaScript. I've used this and it works wonderfully. It's a good alternative until CSS 3 comes around...

GoofyDawg

Hey GS:
'Another technique is to use absolute/relative positioning to position your round masks in the corners of the image.  But that won't work on inline images...'

Why not?
<span class="image"><span class="corner1"></span><span class="corner2"></span><span class="corner3"></span><span class="corner4"></span><img src=""></span>

Just hypothetically, you could add style akin to:
span.image {
  position: relative; /*add position to the span while retaining it's position and size in the original flow*/
}
span.image .corner1{ /*Repeat this for the other corners, using top/left/bottom/right combo's*/
  position: absolute;
  top: 0;
  left: 0;
}

Like I said, hypothetic, didn't test any of this, but it could work just fine :)