What's the latest solution for rounded corners?

Question

Can anyone tell me the the latest solution for implementing rounded corners with DIV tags? Is the PNG corner images still the best cross-browser solution? Is Jquery the best approach? How is everyone approaching the rounded corners problem?

Many thanks.

Erik

Answer 1

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 need for images anymore.

Answer 2

If you must support IE8 and earlier, here are a number of ways to accomplish rounded corners.

According to that Microsoft page:

Windows Internet Explorer 9 supports adding rounded corners to elements using the border-radius properties.

It also suggests these pages which claim to be updated:

25 Rounded Corners Techniques with CSS

CSS Rounded Corners 'Roundup'

Rounded Corners

Without having read all of these many approaches, I'd hazard a guess that there is no universal best solution at the moment. Until we can assume that pretty much all of our visitors have CSS3-compliant browsers, you have to make some choices.