Aprendiendo a aplicar bordes en CSS3

CSS3 tiene nuevas características y la verdad aprenderlas de volada puede llegar a ser difícil, por eso de vez en cuando veremos algunas propiedades CSS normales y algunas CSS3, en esta ocasión vamos a ver uno de los mejores efectos, me refiero al de border-radius.

Después del salto vamos a aprender a usar el border-radius, una propiedad que nos permite definir bordes redondeados a nuestros elementos HTML, útil y bonito si se sabe aplicar.

La propiedad border-radius permite agregar un borde redondeado a cualquier elemento HTML, como por ejemplo, imágenes, capas, textAreas, campos de texto, y cualquier elemento que tenga un borde definido.

La estructura para definir un borde es el siguiente:

border-radius: [cantidad][unidades];

En esta primera representación cantidad es equivalente a un número cualquiera, y unidades a un sistema de medición, pudiendo ser pixeles (px), porcentajes (%), centímetros (cm) o medidas de tipografía (em).

Ahora bien, hay un truquito en todo esto, lo que pasa es que cuando definimos un valor para el borde en realidad estamos definiendo dos valores, es decir, el borde se conforma de un espacio horizontal y uno vertical, entonces si queremos un borde en la esquina izquierda de arriba pondríamos algo así:

border-top-left-radius: 10px 5px;

Este borde tiene una longitud horizontal de 10px y una altura de 5px, entonces, ese sería el borde final. Para definir los otros bordes podemos definirlos igual así:

border-top-right-radius: 10px 5px;

border-top-left-radius: 10px 5px;

border-bottom-left-radius: 10px 5px;

border-bottom-right-radius: 10px 5px;

Pero aún hay otra forma de expresar el radio de un elemento, y consiste en usar el símbolo “/”.Por ejemplo:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;

En este ejemplo definimos sólo un border radius, pero hay demasiados valores además del signo “/”. Esto se codifica de la siguiente manera: para evitar crear más líneas de código compactamos los bordes definiendo los bordes superiores (izquierda y derecha) y los bordes inferiores (derecha y izquierda), como sabrán la orientación se mide de acuerdo al giro de las manecillas del reloj, por lo que la primera cantidad define la esquina superior izquierda, la segunda es la derecha, la tercera es la esquina inferior derecha y la cuarta esquina inferior izquierda, definiendo el valor del borde horizontal. Después de la barra los valores denotan el tamaño de la altura del borde.

Pero para terminar y simplificar lo anterior, podemos definir todo de una mejor manera:

border-radius: 5px 10px 5px 10px;

El código indica que se definen los bordes sin contar espacio vertical y horizontal, es decir, la composición de los bordes es igual en su composición, sólo varia el tamaño definido en las cuatro cantidades. Este código final es el que la mayoría usa para darle un borde definido a los elementos, un tanto porque es más simple de entender y no tienes que modificar tanto valor.

¿Qué te pareció el tutorial?¿Ya estas listo para usar bordes?