CSS3 | Border-radius (parte II)

En el artículo anterior hemos visto la forma más sencilla de utilizar border radius, ahora veremos como se interpretan los valores de radius.

Cuando suministramos el valor en radius, estos se utilizan para definir, los radios horizontales y verticales de un cuarto de elipse, que a su vez determinará la curvatura de la esquina del elemento.

Hasta ahora hemos definido solo un valor por esquina el cual se utiliza para definir

tanto los radios horizontales como los verticales.

Veamos ahora como podemos trabajar sobre los diferentes radios, utilizaré para el ejemplo la esquina superior izquierda.

Border-top-left-radius: value_radio_horiz(A) value_radio_vert(B);

La forma rápida de border-radius se puede utilizar para definir las cuatro esquinas de forma simultánea. La propiedad acepta uno o dos conjuntos de valores, cada uno compuesto de uno a cuatro longitudes o porcentajes.

El primer conjunto de define el/los valores de los radios horizontales para las cuatro esquinas. El segundo conjunto, precedido por una "/", define el radio vertical de las cuatro esquinas.

border-radius: value(A) value(B) value(C) value(D)/value(A') value(B') value(C') value(D');

Un ejemplo podría ser:

Si los cuatro valores se suministran, representan la parte superior izquierda, superior derecha, inferior derecha e inferior izquierda, radios, respectivamente. Si la parte inferior izquierda se omite es el mismo que arriba a la derecha, si la parte inferior derecha se omite es el mismo que arriba a la izquierda, y sólo si un valor es suministrado se utiliza para configurar todos los radios de cuatro partes iguales.


Espero que les haya sido de utilidad...
les dejo un enlace a una página que resulta muy interesante para generar radius. 


Hasta la próxima!!!