Esquinas redondeadas

facebook-svg gplus-svg twitter-svg

Hoy en día podemos crear esquinas redondeadas en el CSS utilizando la propiedad border-radius.
La propiedad border-radius se aplica al elemento, aunque este no tenga definido un borde. Si se trata de un borde simétricamente redondeado, la parte redondeada del borde es ¼ de circulo cuyo radio = R.
Si se trata de un borde redondeado de manera asimétrica, utilizaremos ¼ de elipse para el mismo propósito.

border-radius
border-radius

Veamos algunos ejemplos:

#redondeado{height:6em;width:10em;background-color:#8AC007;border-radius:2em;}

Y ya está! Sin más complicaciones, y sin necesidad de prefijos (vendor prefixes).

Si quieremos saber si hay que utilizar los prefijos (vendor prefixes) con una de las nuevas propiedades de CSS3, podemos consultar esta lista: CSS3 Browser Support Reference

Y la buena noticia es que border-radius ya es compatible con los principales navegadores, incluso IE9 y10.

También podemos redondear las esquinas de manera asimétrica. En este caso utilizaremos ¼ de elipse para la parte redondeada del borde, y necesitaremos especificar los dos "radios" ( A/B ) para definir la curvatura.
Observación: hay que poner una barra oblicua ( / ) entre los valores de la curvatura.

#asimetrico{height:6em;width:10em;background-color:#8AC007;border-radius:3em/2em;}

Tambiéen podemos redondear cada esquina de manera diferente.
Observación: cuando utilizamos propiedades no abreviadas ( border-bottom-left-radius ) ya no pondremos la barra oblicua ( / ) entre los valores de la curvatura.

#combinado{height:6em;width:6em;background-color:#8AC007;border-top-left-radius: 3em 1em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 3em 1em;border-bottom-left-radius:1em 3em;}

Podemos escribir lo mismo utilizando una notación abreviada del CSS. Cuando utilizamos propiedades abreviadas, recorremos las cuatro esquinas en el sentido del reloj (arriba izquierda, arriba derecha, abajo derecha, abajo izquierda).
Observación: también hay que poner una barra oblicua ( / ) entre los valores A (el valor del eje vertical de la elipse/2) y B (el valor del eje horizontal de la elipse/2) de la curvatura.

#combinado1{height:6em;width:6em;background-color:#8AC007;border-radius: 3em 1em 3em 1em / 1em 3em 1em 3em;}