La propiedad de CSS3 border-radius, nos permite redondear las esquinas de cualquier elemento de diseño, sin necesidad de usar imágenes para las esquinas o múltiples elementos div, lo cual simplifica con mucho el diseño y elimina elementos innecesarios que aumentaban el peso de nuestra web.

Es probablemente la propiedad más popular de CSS3, por su sencillez y correcto soporte en todos los navegadores, salvo alguna que otra discrepancia. Con todo ello ya no nos queda escusa alguna para redondear ¡todo lo que se nos ocurra!.

Vamos a empezar por lo más básico, con un par de ejemplos podrás entender mejor su funcionamiento.

La aplicación de la propiedad border-radius varia según se aplique a elementos con o sin borde. Si hay un borde es posible que la parte interna del div quede sin redondear, todo dependerá del grosor del borde y de cuanto redondeemos las esquinas. Su código es, como verás, muy sencillo:

#ejemplo1-1, #ejemplo 1-2 {
   border-radius:0.75em;
}

Sin embargo, y para una mayor compatibilidad con navegadores antiguos lo mejor es añadir los prefijos -webkit- y -moz-, quedando el código del primer ejemplo de esta forma:

#ejemplo1-1, #ejemplo1-2 {
   -webkit-border-radius:0.75em;
   -moz-border-radius:0.75em;
   border-radius:0.75em;
}

Con un solo valor, la propiedad border-radius se aplica por igual a cada uno de las cuatro esquinas, pero es posible que queramos dar valores diferentes a las cuatro, o quizás sólo a dos. Para ello podemos dar de uno a cuatro valores a esta propiedad. Su funcionamiento es como sigue:

• Con un sólo valor se aplica por igual a las 4 esquinas.
• Si hay dos valores, el primero se aplica a las esquinas superior-izquierda e inferior-derecha y el segundo valor a las esquinas superior-derecha e inferior-izquierda.
• Si hay tres valores el primero se aplica a la esquina superior-izquierda, el segundo se aplica a las esquinas superior-derecha e inferior-izquierda respectivamente y el tercero a la esquina inferior-derecha.
• Por último si hay cuatro valores se aplicarán según el sentido de las agujas del reloj, comenzando por la esquina superior-izquierda.

Vamos a verlo con un par de ejemplos para que no te pierdas:

En el ejemplo tres he usado sólo dos valores, el segundo de ellos a cero, con lo cual sólo se redondean las esquinas superior-izquierda e inferior-derecha. En el cuarto ejemplo por contra he usado tres valores, el primero a cero con lo cual no se redondeará la esquina superior-izquierda; un segundo valor a 10px, así que se redondearán a este valor las esquinas superior-derecha e inferior-izquierda; y un tercer valor a 20px, con lo que con este valor se redondeará la esquina inferior-derecha. El código no es mucho más complicado:

#ejemplo1-3 {
   border-radius:0.75em 0;
}
#ejemplo1-4 {
   border-radius:0 0.75em 1.5em;
}

La propiedad border-radius es mucho más potente que todo esto, y también podemos definir la forma en que se aplica el redondeo. Hasta ahora hemos estado haciendo redondeos perfectos, o lo que es lo mismo, circulares, pero también es posible hacer redondeos elípticos. Pero, ¿cómo?. Pues muy sencillo, añadiendo una barra inclinada ("/") entre dos valores. Estos dos valores se utilizan para definir, en orden, los radios horizontal y vertical de un cuarto de elipse, que a su vez determina la curvatura de la esquina del borde exterior. Cuando sólo damos un valor es como si ambos valores fuesen iguales, lo que produce una circunferencia perfecta. Lo vemos mejor con un par de ejemplos:

#ejemplo1-5 {
   border-radius:0.75em/2.25em;
}
#ejemplo1-6 {
   border-radius:2.25em/0.75em;
}

Una de las cualidades más sorprendentes de CSS3 es la posibilidad de dibujar. Seguramente te has topado con alguna web en la red con abundante material sobre esta cualidad y con la propiedad border-radius podemos hacerlo. Limitadamente, como es lógico, ya que sólo podemos hacer círculos y elipses. El uso que le des ya es cosa de tu imaginación, pero por ejemplo yo me he topado con un intesesante tutorial redactado por Elaine en xomisse para crear fechas redondeadas en Blogger.

En todos los ejemplos he usado divs con un ancho y un largo de 5em, si se sabe el valor de ambos y son iguales es fácil dibujar un círculo, el valor de border-radius ha de ser la mitad o un valor superior, en mi caso de 2.5em o más. Para la elipse sólo debemos cambiar uno de los dos valores (largo o ancho) y fijar el valor de border-radius a la mitad de uno de ellos. Sin embargo hay ocasiones donde no conocemos los valores exactos, para ello usaremos un valor porcentual a 50%, tanto para dibujar una elipse como un círculo. Venga va, con dos ejemplos, que se ve mucho mejor:

#ejemplo1-7 {
   border-radius:2.5em;
}
#ejemplo1-8 {
   border-radius:50%;
   height:5em;
   width:9em;
}

Y hasta aquí he llegado, me niego ha escribir ni una palabra más en este pedazo de cacho de trozo de algo parecido a un tutorial sobre la propiedad border-radius. Espero que al menos te haya servido de ayuda. Y ahora, a ponerlo en práctica.