| Definición | Establece el color del borde superior de los elementos |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores: |
| Valor inicial | Color negro |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | no |
| 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:
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.