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-colorborder-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 inicialcurrentcolor
Applies toall elements. It also applies to ::first-letter.
Heredableno
Mediavisual
Valor calculadocomputed color
Animation typea color
Canonical orderel orden único no-ambigüo definido por la gramática formal

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

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1121143.51
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico1 ? Si41111 ?

1. Firefox also supports the non-standard -moz-border-top-colors CSS property that sets the top border to multiple colors.

Ver tambien

Etiquetas y colaboradores del documento

Colaboradores en esta página: jpmontoya182
Última actualización por: jpmontoya182,