Rounder corners with CSS3 or with images? - html

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

Answer 4

the jQuery plugin lc_roundz http://coffeelog.itsatony.com/?p=86 will do the job dynamically - even if you want the corners to be transparent (e.g. 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's width
height: -1, // -1 uses the original image's 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
});