Rounder corners with CSS3 or with images?

Question

What is the difference and the best way to create them right now ?

Answer 1

CSS3, definitely. It's faster and cleaner and is supported on all major browsers. IE needs (suprise, suprise) a workaround though:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(border-radius.htc);

Answer 2

In simple words:

The rounded corners created with images should and work across all browsers.

And those created with CSS3 work in modern browsers but not the IE < 9.

What is the difference and the best way to create them right now ?

You should use CSS3's borer-radius propery along with vendor-specific prefixes for the modern browsers. To get rounded corners working in IE as well, you can use:

• CSS3Pie

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

Here is an example of cross-browser rounded corners:

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(path/to/PIE.htc);
}

Answer 3

You can use the jQuery Plugin CurvyCorners

if you do not want to use css3