Bordes con CSS

Ya sabemos que CSS tiene cientas de variables, podemos hacer cosas increíbles sólo con añadir o modificar unos cuántos valores sencillos.

En esta oportunidad mostraré cómo crear bordes y mostraré las distintas cosas que podemos hacer con ellos.


El borde se utiliza de la siguiente forma:

border: 2px solid #c4c4c4;

• El valor ''2px'' corresponde al ancho del borde.
• El valor ''solid'' corresponde al estilo del borde.
• El valor ''#c4c4c4'' corresponde al color del borde.

Se pueden agregar de distintas formas y en distintas ubicaciones.

Opción 1: Las direcciones:

Podemos añadir el borde en la zona que deseemos añadiendo la dirección de la siguiente forma:

• border-left (Izquierda)
• border-right (Derecha)
• border-top (Arriba)
• border-bottom (Abajo)

Veamos un ejemplo:

                                  

border-top: 7px solid #000;

Como vemos he añadido un borde en la zona superior al cuadro, se pueden añadir mas bordes, añadiendo 2 o más líneas:

                                  

border-top: 7px solid #000;

border-left: 7px solid #000;

Opción 2: Esquinas redondeadas:

Se pueden añadir esquinas redondeadas a los bordes de la siguiente forma:

border-radius:5px;

Se puede aumentar o disminur el tamaño para aumentar el margen de las esquinas.

Al igual que la forma anterior, tiene ubicaciones, pero éstas se escriben de la siguiente forma:

border-radius: 4px 4px 4px 4px;

Cada valor corresponde a una dirección.


Esta variable es parcialmente soportada por los navegadores (Internet Explorer 8  y anteriores, como Firefox 3.6 y anteriores no soportan esta característica).

Opción 3: Tipos de bordes:

Existen distintos tipos de bordes, entre los que se encuentran:

Solid:

Este borde es el estándar, corresponde a un borde sencillo y plano:

                                  

border: 7px solid #000;

Dotted:

Este borde es un borde con puntos, tal como se puede apreciar en el siguiente ejemplo:

                                  

border: 7px dotted #000;

Dashed:

Este es un borde entrecortado:

                                  

border: 7px dashed #000;

Double:

Este es un borde doble, el tamaño define el espaciado entre ellos:

                                  

border: 7px double #000;

Groove:

Esta opción de borde es un surco 3D:

                                  

border: 7px groove #000;

Ridge:

Este borde es una versión invertida del Groove:

                                  

border: 7px ridge #000;

Inset:

Este borde 3D es muy similar al Groove:

                                  

border: 7px inset #000;

Outset:

Este borde es la versión invertida del Inset:

                                  

border: 7px outset #000;