Propiedad CSS border-top-color

La propiedad CSS border-top-color define el color únicamente del borde superior de un elemento. Úsala cuando quieras que el borde superior sea diferente de los otros tres lados — por ejemplo, una barra de acento de color encima de una tarjeta o de un encabezado de sección.

Un borde tiene tres partes: su estilo, grosor y color. La propiedad border-top-color controla solo el color. Por sí sola no produce ningún efecto visible, porque el valor predeterminado de border-style es none, lo que elimina el borde por completo. Por ello, debes declarar primero un estilo para el borde superior — usando border-style o border-top-style — antes de que el color tenga algo que pintar.

Para establecer los cuatro colores de borde a la vez en lugar de solo el superior, usa la propiedad abreviada border-color. Las propiedades equivalentes para los demás lados son border-right-color, border-bottom-color y border-left-color.

El grosor de borde predeterminado es medium. Puedes cambiarlo con border-width o border-top-width.

Valor inicial	currentColor
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredado	No
Animable	Sí. El color del borde superior es animable.
Versión	CSS1
Sintaxis DOM	object.style.borderTopColor = "black";

Sintaxis

Sintaxis de la propiedad CSS border-top-color

border-top-color: color | transparent | initial | inherit;

Ejemplo de la propiedad border-top-color:

Ejemplo de la propiedad CSS border-top-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        padding: 20px;
        border-style: solid;
        border-color: #666;
        border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-color example</h2>
    <div>Example for the border-top-color property with different top border color.</div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad border-top-color con el valor "transparent":

Ejemplo de la propiedad CSS border-top-color con el valor transparent

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        padding-bottom: 8px;
        text-align: center;
        border: 12px groove #1c87c9;
        border-top-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a transparent top border</h2>
  </body>
</html>

Pruébalo tú mismo »

Información

Los valores hexadecimales, RGB, RGBA, HSL, HSLA o nombres de color pueden utilizarse como valor de la propiedad border-top-color.

Ejemplo de la propiedad border-top-color con un valor de color por nombre:

Ejemplo de la propiedad CSS border-top-color con el valor darkred (color por nombre)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a named color value.</div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad border-top-color con un valor hexadecimal:

Ejemplo de la propiedad CSS border-top-color con valor hexadecimal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a hexadecimal value.</div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad border-top-color con un valor RGB:

Ejemplo de la propiedad CSS border-top-color con valor RGB

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a RGB value.</div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad border-top-color con un valor HSL:

Ejemplo de la propiedad CSS border-top-color con valor HSL

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: hsl(24, 80%, 50%);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a HSL value.</div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
color	Define el color del borde superior. El color predeterminado es el color del elemento actual. Se pueden usar nombres de color, códigos hexadecimales, rgb(), rgba(), hsl(), hsla(). Valor requerido.	Pruébalo »
transparent	Aplica un color transparente al borde superior. El borde superior seguirá ocupando el espacio definido por el valor border-width.	Pruébalo »
initial	Establece la propiedad a su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Cosas a recordar

El color solo no es suficiente. Como border-style tiene el valor predeterminado none, el borde superior permanece invisible hasta que se establece un estilo (solid, dashed, groove, etc.). Siempre combina border-top-color con un estilo.
currentColor es el valor predeterminado. Si nunca estableces border-top-color, el borde usa el valor color del elemento. Cambiar el color del texto también cambiará el color de un borde sin estilo definido.
transparent sigue reservando espacio. Un borde superior transparente mantiene su border-top-width, por lo que el diseño no cambia — útil para efectos hover que intercambian un borde transparente por uno visible.
Cualquier formato de color es válido. Nombres de color, hex (#1c87c9), rgb(), rgba(), hsl() y hsla() son todos válidos. Usa rgba()/hsla() cuando necesites transparencia parcial.

Propiedades relacionadas

border-top — propiedad abreviada para el grosor, estilo y color del borde superior en una sola declaración.
border-top-style y border-top-width — las otras dos partes del borde superior.
border-color — establece el color de los cuatro bordes a la vez.
border-bottom-color, border-right-color, border-left-color — las propiedades de color por lado para los demás bordes.

Práctica

¿Para qué se utiliza la propiedad 'border-top-color' en CSS?

La propiedad se usa para cambiar el color del borde inferior de un elemento.La propiedad se usa para cambiar el color del borde superior de un elemento.La propiedad se usa para cambiar el color del borde izquierdo de un elemento.La propiedad se usa para cambiar el color del borde derecho de un elemento.La propiedad se usa para cambiar el color de todos los bordes de un elemento.