CODEWITHSUNDEEP
htmlrounded-corners
user796443
user796443

Reputation:

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 compatibility 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?

Upvotes: 0

Views: 130

Answers (3)

kinakuta
kinakuta

Reputation: 9037

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.

Upvotes: 1

mehul9595
mehul9595

Reputation: 1955

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

Upvotes: 0

tkahn
tkahn

Reputation: 1417

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

Upvotes: 0

Related Questions