What is the last solution for rounded corners?

Question

Can someone tell me the latest solution for implementing rounded corners with DIV tags? Carbon PNG images still the best cross browser solution? Is jQuery a better approach? How does everyone approach the problem of rounded corners?

Thank you very much.

Eric

Answer 1

The optimal solution at the moment is to use:

selector { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } 

This will work in all "modern" browsers, including IE9, see: http://caniuse.com/#search=border-radius

To date, the best solution for older versions of IE is to use CSS3 PIE :

PIE makes Internet Explorer 6-8 capable of providing some of the most useful CSS3 styling features.

PIE currently has full or partial support for the following CSS3 features:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear gradient as background image

As you can see, you also get support for more CSS3 eye candy

Answer 2

For most browsers, CSS3 provides a way.

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

 .rounded-corners { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } 

No more need for images.

Answer 3

If you must support IE8 before, here are a few ways to make rounded corners.

According to this Microsoft page:

Windows Internet Explorer 9 supports adding rounded corners to elements that use the border radius of a property.

He also offers these pages that claim to be updated:

25 CSS Rounded Corner Techniques

CSS Rounded Corners 'Roundup'

Rounded corners

Without reading all of these many approaches, I would jeopardize that at the moment there is no one universal best solution. While we cannot assume that almost all of our visitors have CSS3-compatible browsers, you should make some choices.