Esquinas más redondeadas con CSS3 o con imágenes?

Question

¿Cuál es la diferencia y la mejor manera de crearlos en este momento?

Answer 1

CSS3, sin duda. Es más rápido y más limpio y es compatible con todos los principales navegadores. IE necesita (sorpresa, sorpresa) un workaround though:

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

Answer 2

En palabras sencillas:

las esquinas redondeadas creados con imágenes debe y el trabajo en todos los navegadores.

Y aquellos creados con el trabajo CSS3 en los navegadores modernos, pero no el IE < 9.

¿Cuál es la diferencia y la mejor manera de crear ellos en este momento?

Debería usar la propiedad borer-radius de CSS3 junto con los prefijos específicos del proveedor para los navegadores modernos. Para conseguir esquinas redondeadas que trabajan en IE, así, puede utilizar:

• CSS3Pie

PIE hace Internet Explorer 6-8 capaz de hacer varias de las características más útiles decoración CSS3.

Aquí es un ejemplo de cross-browser esquinas redondeadas:

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

Answer 3

Puede utilizar el plugin de jQuery CurvyCorners

si no quiere utilizar CSS3

Answer 4

la lc_roundz plugin de jQuery http://coffeelog.itsatony.com/?p=86 va a hacer el trabajo de forma dinámica - incluso si desea que las esquinas sean transparentes (p. ej., para usar en fondos complejos, ...).

$("#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 
});