Propiedad border-color

La propiedad border-color establece el color del borde para todos los lados simultáneamente o por separado para cada lado. Los valores de la propiedad son cualquier unidad de color. Valor por defecto: el mismo color que el texto del bloque.

La propiedad es una propiedad abreviada para las siguientes propiedades: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaxis

selector {
	border-color: color;
}

Cantidad de valores

La propiedad puede tomar 1, 2, 3 o 4 valores, especificados separados por espacios:

Cantidad	Descripción
`1`	Tipo para todos los lados simultáneamente.
`2`	Primer valor para arriba y abajo, segundo - para los bordes izquierdo y derecho.
`3`	Primer valor para arriba, segundo - para los bordes izquierdo y derecho, tercero - para el inferior.
`4`	Primer valor para el borde superior, segundo - para el derecho, tercero - para el inferior, cuarto - para el borde izquierdo.

Ejemplo

Pintemos el borde del bloque en color rojo:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos un borde rojo para los lados superior e inferior y azul claro para los lados derecho e izquierdo:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos un borde rojo para el lado superior, azul claro para el derecho, verde para el inferior, negro para el lado izquierdo:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos simultáneamente diferente grosor, tipo y color de borde:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Ejemplo

Si el color del borde no se establece en border-color - se tomará de la propiedad color:

<div id="elem"></div>

#elem {
	color: red;
	border-style: solid;
	border-width: 2px;
	width: 300px;
	height: 100px;
}

Véase también

propiedad border-width,
que establece el grosor del borde
propiedad border-style,
que establece el tipo de borde
propiedad border,
que es la propiedad abreviada para el borde