what is the cleanest way to get rounded corners on images using html/css? (crossbrowser)

I've fixed image size. And I want to achieve rounded corners through html/css.

Options I'm thinking about is to overlay image with four corner png. Using img:after and content. But unfortunately img:after is purely supported across browsers, let alone com开发者_开发知识库patibility with IE 6.7.

Is there any simple clean way to achieve this?

In theory I could also create div with corner background and make it go absolute over the image... but that would break save as functionality.......

any ideas?

Well, there's always CSS3 rounded corners border radius which has very good support in every modern browser, then the CSS3PIE polyfill for older versions of IE.

If you can live with the fact that browsers that don't support border-radius will show plain old square images, you could use this jQuery script to automatically wrap your images in div's and give them corners:

http://www.smoothdivscroll.com/roundedimagecorners/ (View the source to get the js and see how it's used)

Here's an article that I've written that explains the background to this script: http://www.swedishfika.com/2010/03/19/rounded-corners-on-images-with-css3-2/

Regards, Thomas

To make border round in IE there is little work around for that. Please have a look at this link