Propiedades shorthand

Como sucede con los márgenes y los rellenos, CSS define una serie de propiedades de tipo "shorthand" que permiten establecer todos los atributos de los bordes de forma directa. CSS ha definido una propiedad "shorthand" para cada uno de los cuatro bordes y una propiedad "shorthand" global.

Antes de presentar las propiedades, es conveniente definir los tres siguientes tipos de valores:

<medida_borde> = <medida> | thin | medium | thick
<color_borde> = <color> | transparent
<estilo_borde> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

border-top: Estilo completo del borde superior
border-right: Estilo completo del borde derecho

border-bottom: Estilo completo del borde inferior

border-left: Estilo completo del borde izquierdo

Valores: ( <medida_borde> || <color_borde> || <estilo_borde> ) | inherit
Se aplica a: Todos los elementos
Valor inicial: -
Descripción: Establece el estilo completo de cada uno de los cuatro bordes de los elementos

Las propiedades "shorthand" permiten establecer alguno o todos los atributos de cada borde. El siguiente ejemplo establece el color y el tipo del borde inferior, pero no su anchura:

h1 {
border-bottom: solid red;
}

En el ejemplo anterior, la anchura del borde será la correspondiente al valor por defecto (medium). Este otro ejemplo muestra la forma habitual utilizada para establecer el estilo de cada borde:

div {
border-top: 1px solid #369;
border-bottom: 3px double #369;
}

Por ultimo, CSS define una propiedad de tipo "shorthand" global para establecer el valor de todos los atributos de todos los bordes de forma directa:

border: Estilo completo de todos los bordes
Valores: ( <medida_borde> || <color_borde> || <estilo_borde> ) | inherit
Se aplica a: Todos los elementos
Valor inicial: -
Descripción: Establece el estilo completo de todos los bordes de los elementos

Las siguientes reglas CSS son equivalentes:
div {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
div { border: 1px solid red; }

Como el valor por defecto de la propiedad border-style es none, si una propiedad shorthand no establece explícitamente el estilo de un borde, el elemento no muestra ese borde:

/* Sólo se establece el color, por lo que el estilo es
"none" y el borde no se muestra */
div { border: red; }

/* Se establece el grosor y el color del borde, pero no
su estilo, por lo que es "none" y el borde no se muestra */
div { border-bottom: 5px blue; }

Cuando los cuatro bordes no son idénticos pero sí muy parecidos, se puede utilizar la propiedad border para establecer de forma directa los atributos comunes de todos los bordes y posteriormente especificar para cada uno de los cuatro bordes sus propiedades particulares:

h1 {
border: solid #000;
border-top-width: 6px;
border-left-width: 8px;
}