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;

Sintaxis

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

Valores

<color>

El color superior del borde

Sintaxis Formal

<color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

Compatibilidad entre navegadores

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, border-bottom-color, y border-left-color.
• Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : border-top-style y border-top-width.