border-top-color

La propiedad CSS border-top-color establece el color superior de un elemento border. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas border-color o border-top son mas convenientes y preferidas.

/*valores <color> */
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentColor;
border-top-color: transparent;

/* Valores globales */
border-top-color: inherit;
border-top-color: initial;
border-top-color: unset;

Valor inicial	`currentcolor`
Applies to	all elements. It also applies to `::first-letter`.
Heredable	no
Valor calculado	computed color
Animation type	a color

Sintaxis

La propiedad border-top-color es especificada con un valor unico.

Valores

<color>: El color superior del borde

Sintaxis Formal

border-top-color = 
  <color>

Ejemplos

Un div simple con un borde

HTML

<div class="mybox">
  <p>Esta es una caja con un border alrededor.
     Tenga en cuenta que un border de la caja es
     <span class="redtext">Rojo</span>.</p>
</div>

CSS

.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}

Resultado

Especificaciones

Especificación	Estado	Comentarios
CSS Backgrounds and Borders Module Level 3 La definición de 'border-top-color' en esta especificación.	Candidate Recommendation	Sin cambios significativos, aunque la palabra clave `transparent` , ahora incluida en `<color>` que se ha extendido, se ha eliminado formalmente.
CSS Level 2 (Revision 1) La definición de 'border-top-color' en esta especificación.	Recommendation	Definición inicial

Compatibilidad entre navegadores

BCD tables only load in the browser

Ver tambien

Las propiedades abreviadas de CSS relacionadas con los bordes : border, border-top, y border-color.
Las propiedades abrevadas de CSS relacionadas con el color para los bordes: border-right-color (en-US), border-bottom-color, y border-left-color.
Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : border-top-style (en-US) y border-top-width (en-US).