Corner corners with CSS3 or with images?

Question

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

Answer 1

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

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

Answer 2

In simple words:

Rounded corners created with images should work in all browsers.

And those created using CSS3 work in modern browsers, but not in IE 9.

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

You should use CSS3 borer-radius , as well as browser-specific prefixes for modern browsers. To get rounded corners working in IE, you can use:

• CSS3Pie

PIE makes Internet Explorer 6-8 capable of providing some of the most useful CSS3 styling 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 jQuery CurvyCorners plugin

if you do not want to use css3

Answer 4

the jQuery lc_roundz plugin http://coffeelog.itsatony.com/?p=86 will do the job dynamically - even if you want the corners to be transparent (for example, for use on complex backgrounds, ...).

 $("#image").lc_roundz({ radius: 20, // corner-radius newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original newid: "%oid_after_lc_roundz", // the new ID for the canvas object. %oid will be replaced with the id of the original object width: -1, // -1 uses the original image width height: -1, // -1 uses the original image width replace: false, // boolean to decide whether the original should be removed from the DOM corner_color: [0,0,0,0] // this means TRANSPARENT ... R,G,B,alpha [0-255] each });