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