CSS: Bordes

CSS permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, su color y su estilo.

Anchura de los bordes

La anchura del borde se define por medio de la propiedad border-width, que dispone de los valores thin, medium y thick, o de un valor numérico indicado en píxeles.

Es posible definir un comportamiento diferente para cada uno de los cuatro bordes utilizando las propiedades individuales border-top-width, border-right-width, border-bottom-width y border-left-width.

Además existe la posibilidad (como se ha visto en margin y padding) de agrupar los valores en una sola linea. Sirvan los siguientes ejemplos:

p { border-width: thin } /* thin thin thin thin */
p { border-width: thin thick } /* thin thick thin thick */
p { border-width: thin thick medium } /* thin thick medium thick */
p { border-width: thin thick medium thin } /* thin thick medium thin */

Si se indica un solo valor, se aplica a los cuatro bordes.

Si se indican dos valores, el primero se aplica al borde superior e inferior y el segundo valor se aplica al borde izquierdo y derecho.

Si se indican tres valores, el primero se aplica al borde superior, el segundo se aplica al borde izquierdo y derecho y el tercer valor se aplica al borde inferior.

Si se indican los cuatro valores, el orden de aplicación es superior, derecho, inferior e izquierdo.

Color de los bordes

La propiedad border-color define el color del borde. Los valores de esta propiedad son los valores de color que se explicaron en capítulos anteriores. Por ejemplo, "#faa" (en notación hexadecimal), "rgb(123,123,123)" (en notación RGB) o "yellow" (por nombre del color).

Para definir colores diferentes para cada uno de los bordes, se utilizarán las propiedades border-top-color, border-right-color, border-bottom-color y border-left-color.

Estilo de bordes

Existen 8 diferentes estilos de borde. El valor de esta propiedad puede modificarse mediante el atributo border-style. Por defecto tendrá asociado el valor none, por lo que no se mostrará ningún borde. La siguiente figura muestra los posibles valores y su interpretación (testeado en la versión 3.0 de Firefox):

Para definir estilos diferentes para cada uno de los bordes se utilizarán las propiedades border-top-style, border-right-style, border-bottom-style y border-left-style.

Combinación de TODAS LAS propiedades de bordes

Como ocurre en otros muchos casos, usando la propiedad border se pueden combinar otras muchas propiedades en una sola. El orden será el siguiente:

border: grosor estilo color;

Un ejemplo sería:

p { border: 1px solid red; }

También es posible definir las propiedades para un borde individual:

border-bottom: 3px double #369;

REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO