Propiedad border-color

Ejemplos de uso

La propiedad border-color es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

Si se quiere establecer el mismo valor para el color de todos los bordes de un elemento, se podría utilizar la siguiente regla CSS:

div {
  border-top-color: red;
  border-right-color: red;
  border-bottom-color: red;
  border-left-color: red;
}

En este caso, es mejor utilizar la propiedad border-color para establecer de forma abreviada el mismo color a todos los bordes del elemento:

div {
  border-color: red;
}

La propiedad border-color es tan poderosa que permite establecer el color de uno, dos, tres o los cuatro bordes de forma simultánea.

Si se indican dos valores, el primero hace referencia a los bordes superior e inferior y el segundo es el valor de los bordes izquierdo y derecho, de modo que las siguientes reglas CSS son equivalentes:

div {
  border-color: red blue;
}

div {
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: red;
  border-left-color: blue;
}

Si se indican tres valores, el primero hace referencia al borde superior, el segundo es el valor de los bordes izquierdo y derecho y el tercero es el borde inferior, de modo que las siguientes reglas CSS son equivalentes:

div {
  border-color: red blue green;
}

div {
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-left-color: blue;
}

Por último, si se indican cuatro valores, el primero es el borde superior, el segundo es el borde derecho, el tercero es el borde inferior y el cuarto es el borde izquierdo, de modo que las siguientes reglas CSS son equivalentes:

div {
  border-color: red blue green white;
}

div {
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-left-color: white;
}

Para establecer el color de cada borde, se puede utilizar cualquiera de las diferentes formas de indicar un color en CSS:

Además de utilizar colores normales, también es posible establecer alguno o todos los bordes de color transparente. Un borde transparente es muy diferente a no tener borde, ya que el borde transparente no se ve pero sí que ocupa sitio.

En el siguiente ejemplo, la primera caja tiene establecido un borde transparente que, gracias a JavaScript, cambia de color cuando se pasa el ratón por encima de la caja. Como el borde transparente no se ve pero sí que ocupa sitio, al mostrar el nuevo borde la caja no se mueve, ya que el navegador había reservado el sitio necesario para el borde transparente.

Sin embargo, la segunda caja no tiene establecido ningún borde y al pasar el ratón por encima suyo, gracias a JavaScript, se muestra un borde. En este caso, como antes no existía un borde y ahora sí, el navegador desplaza la caja ya que debe hacer sitio para mostrar el borde.

El uso de propiedades como border-color no sólo hace más breve el código CSS, sino que demuestra que se tienen conocimientos avanzados de CSS.