Rounded Borders on image corners with gradient background thats stretched

I have hundreds images that will be loaded and displayed randomally and then change to another image (there are 4 image boxes, each one displays a specific image for 10 seconds and then changes to another completely random image.)

Now these images need to be rounded, however I've tried every possible method I can think of. I can't use a transparent image to place over the image with rounded corners because the background is stretched (a liquid template).

I've tried 开发者_高级运维javascript rounded image corners (js corners) (doesn't work with image transition and too much delay), tried to use an image to place overtop (looks horrible), css rounded corners (needs to be more cross browser). The only method I can think of is PHP, however that is really CPU intensive and there will be a lot of images.

I'm looking for some ideas, maybe different background image and positioning for each resolution instead of a single stretched background? But I'd much rather not double the loading time.

Any ideas?

• Steve

This is hardly a fix, but IE9 will support CSS border-radius in 2011. Of course, many people will be using IE7/8 for a considerable time so this is less than ideal.

A possible hack to use is spoken of here: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser. I haven't tried it, but I will be in the future.

Hope this helps,

James

EDIT: I'm not sure this will curve your images, although it might - a quick look through the source seems that the .htc file actually creates the corner radius pixel by pixel.

Hey, try this :) works fine for me... ;]