Propiedad border-top-color

DefiniciónEstablece el color del borde superior de los elementos
Valores
permitidos
Uno y sólo uno de los siguientes valores:
Valor inicialColor negro
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/box.html#propdef-border-top-color

Ejemplos de uso

En primer lugar, la propiedad border-top-color permite establecer el color del borde superior de un elemento mediante cualquiera de las diferentes formas de indicar un color en CSS:

div { border-top-color: red; }
div { border-top-color: #F00; }
div { border-top-color: rgb(255, 0, 0); }

Además de utilizar colores normales, también es posible establecer el borde 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 superior 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 superior 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.

div { border-top-color: transparent; }
div { border-top: none; }