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} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1
Notas
Soporte completo 1
Notas
Notas Firefox also supports the non-standard -moz-border-top-colors CSS property that sets the top border to multiple colors.
IE Soporte completo 4Opera Soporte completo 3.5Safari Soporte completo 1WebView Android Soporte completo 1Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4
Notas
Soporte completo 4
Notas
Notas Firefox also supports the non-standard -moz-border-top-colors CSS property that sets the top border to multiple colors.
Opera Android Soporte completo 11Safari iOS Soporte completo 1Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.

Ver tambien

Etiquetas y colaboradores del documento

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