--- title: border-top-color slug: Web/CSS/border-top-color translation_of: Web/CSS/border-top-color ---
{{CSSRef}}

La  propiedad CSS border-top-color  establece el color superior de un elemento {{cssxref("border")}}. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas {{cssxref("border-color")}} o {{cssxref("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;

{{cssinfo}}

Sintaxis

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

Valores

{{cssxref("<color>")}}
El color superior del borde

Sintaxis Formal

{{csssyntax}}

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

{{EmbedLiveSample('A_simple_div_with_a_border')}}

Especificaciones

Especificación Estado Comentarios
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}} {{Spec2('CSS3 Backgrounds')}} Sin cambios significativos, aunque la palabra clave transparent , ahora incluida en {{cssxref("<color>")}} que se ha extendido, se ha eliminado formalmente.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}} {{Spec2('CSS2.1')}} Definición inicial

Compatibilidad entre navegadores

{{Compat("css.properties.border-top-color")}}

Ver tambien