5.5.11 'border-top-width'

Valor: thin | medium | thick | <longitud>
Inicial: 'medium'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A

Esta propiedad establece la anchura del borde superior de un elemento. La anchura de los valores correspondientes a las palabras clave depende del AU, pero siempre se cumple que 'thin' <= 'medium' <= 'thick'.

Las anchuras correspondientes a las palabras clave son constantes a lo largo de un mismo documento:

H1 { border: solid thick red }
P  { border: solid thick blue }

En este ejemplo, los elementos 'H1' y 'P' tendrán la misma anchura de borde independientemente del tamaño de fuente. Para conseguir anchuras relativas, puede utilizarse la unidad 'em':

H1 { border: solid 0.5em }

Las anchuras de los bordes no pueden ser negativas.

5.5.12 'border-right-width'

Valor: thin | medium | thick | <longitud>
Inicial: 'medium'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A

Esta propiedad establece la anchura del borde derecho de un elemento. Por lo demás es análoga a la propiedad 'border-top-width'.

5.5.13 'border-bottom-width'

Valor: thin | medium | thick | <longitud>
Inicial: 'medium'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A

Esta propiedad establece la anchura del borde inferior de un elemento. Por lo demás es análoga a la propiedad 'border-top-width'.

5.5.14 'border-left-width'

Valor: thin | medium | thick | <longitud>
Inicial: 'medium'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A

Esta propiedad establece la anchura del borde izquierdo de un elemento. Por lo demás es análoga a la propiedad 'border-top-width'.

5.5.15 'border-width'

Valor: [thin | medium | thick | <longitud>]{1,4}
Inicial: no definido para las propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A

Esta propiedad es una propiedad abreviada para establecer las propiedades 'border-top-width', 'border-right-width', 'border-bottom-width' y 'border-left-width' en un mismo lugar de una hoja de estilo.

Puede haber entre uno y cuatro valores, interpretándose de la siguiente manera:

• un valor: las cuatro anchuras de borde se establecen a ese valor
• dos valores: las anchuras de borde superior e inferior se establecen al primer valor, y las de los bordes derecho e izquierdo al del segundo
• tres valores: el primero es la anchura del borde superior, el segundo la del derecho e izquierdo, y el tercero la del inferior
• cuatro valores: superior, derecho, inferior e izquierdo respectivamente

En los ejemplos que siguen, los comentarios indican las anchuras resultantes de los bordes superior, derecho, inferior e izquierdo respectivamente:

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

Los bordes no pueden ser negativos.

5.5.16 'border-color'

Valor: <color>{1,4}
Inicial: el valor de la propiedad 'color'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A

La propiedad 'border-color' establece el color de los cuatro bordes. 'border-color' puede tener de uno a cuatro valores, asignándose estos valores a los diferentes lados de manera análoga a la explicada anteriormente para la propiedad 'border-width'.

Si no se especifica ningún valor de color, se utilizará en su lugar el valor de la propiedad 'color':

P { 
  color: black; 
  background: white; 
  border: solid;
}

En este ejemplo, el borde será una línea continua (solid) negra.

5.5.17 'border-style'

Valor: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Inicial: none
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A

La propiedad 'border-style' establece el estilo de los cuatro bordes. Puede tener entre uno y cuatro valores, estableciéndose los valores de los cuatro lados de manera análoga a la explicada anteriormente para la propiedad 'border-width'.

#xy34 { border-style: solid dotted }

En este ejemplo, los bordes horizontales serán continuos ('solid') y los bordes verticales punteados ('dotted').

Al ser el valor inicial de los estilos de los bordes 'none' (ninguno), ningún borde será visible a menos que se establezca el estilo del borde.

El significado de los posibles estilos de borde es el siguiente:

none (ninguno)

no se dibuja el borde (independientemente del valor de la propiedad 'border-width')

dotted (punteado)

el borde es una línea punteada dibujada encima del fondo del elemento

dashed (a trazos)

el borde es una línea a trazos dibujada encima del fondo del elemento

solid (continuo)

el borde es una línea continua

double (doble)

el borde es una línea doble dibujada encima del fondo del elemento. La suma de cada una de las dos líneas más el espacio entre ellas es igual al valor <anchura-de-borde>.

groove (canal)

se dibuja un canal o acanaladura 3D con colores basados en el valor <color>.

ridge (cresta)

se dibuja una cresta o saliente 3D con colores basados en el valor <color>.

inset (bajorrelieve)

se dibuja un bajorrelieve 3D con colores basados en el valor <color>.

outset (altorrelieve)

se dibuja un altorrelieve 3D con colores basados en el valor <color>.

CSS1 básico: Los AAUU pueden interpretar cualquier valor 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' y 'outset' como 'solid'.