Para poder aplicar bordes utilizando HTML era imprescindible crear tablas. Aparte de los problemas de accesibilidad está claro que lo que hacemos es utilizar un elemento cuya función es darle estructura al contenido para conseguir un formato gráfico en la presentación.

Gracias a las hojas de estilo podremos aplicarle bordes a cualquier elemento, incluso una palabra dentro de un párrafo y con variedad de efectos.

Propiedad abreviada

Aunque en ocasiones anteriores hemos colocado en último lugar la agrupación de propiedades de forma simplificada, en este caso presentamos en primer lugar la propiedad base para tenerla en cuenta como referencia dada la gran cantidad de posibles combinaciones de valores y propiedades.

Utilizando el término border podemos especificar todas las características aplicables a los bordes sobre las que se puede incidir, que son el color, el grosor y el tipo de trazo.

Antes de entrar a ver cada una de estas propiedades particulares es conveniente tener en cuenta una cuestión previa sobre la identificación de los bordes, porque tenemos la posibilidad de indicar las propiedades de cada uno individualmente, mientras que si utilizáramos la propiedad genérica border aplicaríamos los mismos valores a todos ellos.

Identificación de los bordes

Para referirnos a cada uno de los bordes del rectángulo que rodea a cada elemento utilizamos las palabras top , right, bottom y left. La enumeración no ha sido al azar, sino que sigue el orden por defecto en sentido horario: borde superior, derecho, inferior e izquierdo.

• Podríamos ir pues definiendo las propiedades que veremos en los siguientes epígrafes para border-top, border-right, border-bottom y border-left. Ej. border-top:solid red thin , border-right:dotted green thin; border-bottom:solid orange thin; , etc
   
• También podríamos utlizar el orden por defecto para indicar las propiedades como en el siguiente ejemplo en el que se usa la propiedad de color para indicar los colores de cada borde. border:dashed thin ; border-color:red blue green yellow
   

Como norma general respecto al orden cuando aplicamos cualquiera de las propiedades que veremos a continuación:

• si solo especificamos un valor se aplicará a todos los bordes ese valor. (red en este ejemplo)

 
• si especificamos dos el primer valor será para superior e inferior y el segundo para derecho e izquierdo (blue y red en este caso)

 
• si especificamos tres seguiremos un un orden de arriba a abajo: el primero será para el superior, el segundo para los laterales y el tercero para el inferior (orange, lime y maroon)

 
• si especificamos los cuatro se seguirá el orden por defecto superior, derecho, inferior, izquierdo. (fuchsia, black, navy y silver )

Color

Propiedad: border-color

Valores: podemos utilizar el nombre CSS o la referencia RGB de un color en cualquiera de sus notaciones tal como ya hemos visto.

Recuerda lo que acabas de ver sobre la cantidad de valores especificados para esta propiedad y su orden de aplicación.

Estilo del trazo

Propiedad: border-style

Valores: tenemos una serie de palabras reservadas cuyo efecto puedes ver en los ejemplos.

La inclusión de una imagen como fondo lleva asociadas tres propiedades que nos permitirán especificar si la imagen se repite, la posición en caso de no repetirse y el desplazamiento vertical si la página ocupa más de una pantalla.

Grosor

Propiedad: border-width

Valores: Podemos especificar el grosor indicando un valor en cualquiera de las unidades admitidas, o bien mediante las palabras reservadas que se muestran en el ejemplo.

Agrupando propiedades de los bordes

Como ya se comentó al inicio del apartado podemos agrupar las propiedades referentes al borde bajo una propiedad abreviada border a la que le adjudicaríamos los valores correspondientes a grosor, estilo, y color, pero teniendo en cuenta que al hacerlo así solo podremos indicar un valor para cada propiedad que se aplicaría a todos los bordes por igual.