Esquinas redondeadas con CSS

Las esquinas redondeadas son un pequeño detalle que sin duda le dan un toque muy llamativo a un sitio.
Anteriormente para conseguir esto era necesario la utilización de imágenes o código Java o ese tipo de cosas, ahora esto no es necesario, ya que con solo escribir un par de lineas de código CSS3 es suficiente.


Para conseguir el efecto tenemos que hacer uso de la propiedad border-radius.
Claro que para esto es necesario la utilización de unos prefijos especiales, estos son:

-webkit , para Chrome y Safari
-moz , para Mozilla
-o , para Opera y
-ms , para Explorer

Entonces el código nos quedaría de la siguiente manera:

.esquinas-redondeadas {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -o-border-radius: 10px;
   -ms-border-radius: 10px;
   border-radius: 10px;
}

También ay que decir que al escribir un solo valor le estamos diciendo al navegador que a todas las esquinas les de el mismo valor, entonces seria lo mismo escribir:

.esquinas-redondeadas {
   border-radius-topleft: 10px;
   border-radius-topright: 10px;
   border-radius-bottomleft: 10px;
   border-radius-bottomright: 10px;
}

Pero si queremos que cada esquina tenga un valor diferente podemos escribirlo de la siguiente forma:

.esquinas-redondeadas {
   border-radius: 10px 20px 30px 40px;
}

Que seria lo equivalente a:

.esquinas-redondeadas {
   border-radius-topleft: 10px;
   border-radius-topright: 20px;
   border-radius-bottomright: 30px;
   border-radius-bottomleft: 40px;
}

El resultado seria algo como esto:

DIV con esquinas redondeadas irregulares.

Y bueno eso seria todo, espero les sirva. Y nos leemos luego!
Sin embargo les dejo un enlace a una aplicación online que genera todo el código CSS necesario para generar cajas redondeadas:

Enlace: Aplicación