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

cssselector {
  border-color: color;
}

Cantidad de valores

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

Ejemplo

Pintemos el borde del bloque en color rojo:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Véase también