What's the latest solution for rounded corners?

问题

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

回答1:

The optimal solution at the moment is to use:

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

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

By far the best workaround for older versions of IE is to use CSS3 PIE:

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration 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

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

回答3:

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.

来源：https://stackoverflow.com/questions/6170177/whats-the-latest-solution-for-rounded-corners

标签

html

css

rounded-corners