border-color

la propiedad border-color es un atajo para definir el color de los cuatro bordes de un elemento.

• Valor inicial: el color del elemento en sí
• Se aplica a: todos los elementos
• Herencia: no
• Percentages: N/A
• Medio: visual
• Valor calculada: el valor del color por defecto, o lo que se especificó.

border-color: [ <color> || transparent ]{1,4} | inherit

<color>

el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color.

transparent

el borde no aparece pero ocupa el sitio definido.

Se pueden pasar hasta cuatro valores;

Con un color, los cuatro lados tendrán el mismo. Con dos colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo. Con tres colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo. Con cuatro colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda.

Ver El Ejemplo Vivo

element {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Para poder ver el/los bordes también hay que definir el ancho con un valor positivo y el estilo con algo visible. (diferente de none o hidden)

La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko.

• -moz-border-bottom-colors
• -moz-border-left-colors
• -moz-border-right-colors
• -moz-border-top-colors