12. CSS, Módulo borderMódulo border de CSS3

El módulo border, dentro del módulo background y border, te permite especificar un estilo de borde, ya sea continuo o discontinuo, además de poder aplicar imágenes en ellos.

border-color

Con esta propiedad podrás cambiar el color del borde de todos tus elementos HTML, a la vez. Los valores pueden ser, un nombre de color, rgb, rgba, hexadecimal, hls y hlsa.

div {
   border-color: #000;
}

En el ejemplo, se pinta de negro el borde de todos los lados, siempre que sea visible. Para dar color en un lado concreto usaras las propiedades siguientes:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Funcionan exactamente igual que border-color, pero con cada lado específicamente.

border-style

Con esta propiedad podrás dar el estilo de borde que tú quieras. Hay muchos tipos diferentes. El tipo de borde por defecto es none, es decir, sin borde.

border-style: [ none | hidden | dotted | dashed | 
solid | groove | ridge | inset | outset | initial | inherid ]

El valor hidden está oculto y el valor initial restablece el estilo de borde, que es none.

Como puedes ver la caja dotted solid double dashed, la número 11 de la imagen de arriba tiene varios tipos de borde. Su declaración es:

border-style: dotted solid double dashed;

Nota: Siempre se empieza a declarar desde la parte superior (top) y seguidamente en sentido horario (right – bottom – left). Es así en cualquier declaración CSS.

Cuando quieres declarar en parejas de lados. En la caja número 12 de la imagen (dotted solid) el borde superior e inferior son con puntos (dotted) y el lado izquierdo y derecho son sólidos (solid). Varios ejemplos:

border-style: dotted solid; /* dothed solid dothed solid */
border-style: dotted solid dashed; /* dothed solid dashed solid */
border-style: solid; /* solid solid solid solid */  

También tenemos las declaraciones de propiedades específicas de cada lado:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

border-width

Con esta propiedad especificas el ancho o grueso del borde. El valor por defecto es medium, pero recuerda que el border-style por defecto es none.

border-width: [ <length> | thin | medium | thick ]

Las medidas <length> se pueden especificar en px, em, rem, %. En el módulo css values and units lo verás más en profundidad.

border-radius

Con esta propiedad puedes definir lo redondeadas que serán las esquinas de los bordes de tus elementos. Puedes usar un patrón de circunferencia o una elipse, según como lo declares:

En este caso hemos usado un patrón de forma elipse, ya que hemos declarado 20px de radio en el eje X y 10px en el eje Y.

Si queremos usar un patrón totalmente redondo usaremos la siguiente declaración de la imagen:

Declarando un solo valor damos a entender que el eje X y Y son iguales.

La propiedad border-radius tiene las siguientes variaciones:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Valores declarados

• Si declaras un valor, se aplicará en todas las esquinas.

• Si declaras dos valores, se aplica, la primera (superior-izquierda y inferior-derecha) y el segundo valor (superior-derecha y inferior izquierda).

• Si declaras 3 valores, el primero se aplica en superior-izquierda, el segundo en superior-derecha y su contrario (inferior-izquierda) y el tercer valor al inferior-derecha

• Y si declaras 4 valores, cada una se aplica en su correspondiente, siguiendo la norma general (arriba-izquierda, arriba-derecha, abajo-derecha y abajo izquierda)

border-image

CSS3 ofrece una serie de propiedades que te ayuda a establecer una imagen como borde de tus elementos. Esta característica te ayuda a definir bordes más complicados y suprime la necesidad de tener que utilizar muchas cajas.

Para insertar una imagen, se usa la propiedad border-image, en vez de border-style. A través de la propiedad border-image-source o su abreviatura border-image se indica la url donde se ubica la imagen que se quiere utilizar. Es un poco complicado de explicar, por lo que en próximos artículos lo explicaré detenidamente.

Efectos de sombra

Otra de las características interesantes es aplicar efectos de sombras alrededor de los elementos HTML. La propiedad es:

div {
   box-shadow: 50px 20px 10px #000;
}

En este ejemplo, se aplica una sombre de color negro con 50 px de desplazamiento a la derecha (si fuera -50px sería a la izquierda), 20px hacia abajo (si fuera -20px) sería hacia arriba y 10px de desenfoque.

Aquí el resultado:

Se pueden añadir más sobras solapadas, pero eso ya lo trataré en próximos artículos.

Propiedad border abreviada

Como en muchas otras propiedades de CSS, también se puede declarar la propiedad border de una forma abreviada y en una sola línea. Destacar que sólo sirve para declarar el grueso (border-width), el estilo (border-style) y el color (border-color), en este orden:

border: 2px solid #eee;

Si te ha gustado o te ha aclarado conceptos el contenido de este artículo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!