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 |
Media | visual |
Valor calculado | computed color |
Animation type | a color |
Canonical order | el 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
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Soporte básico | 1 | 12 | 11 | 4 | 3.5 | 1 |
Feature | Android webview | Chrome para Android | Edge mobile | Firefox para Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Soporte básico | 1 | ? | Si | 41 | 11 | 1 | ? |
1. Firefox also supports the non-standard -moz-border-top-colors
CSS property that sets the top border to multiple colors.
Ver tambien
- Las propiedades abreviadas de CSS relacionadas con los bordes :
border
,border-top
, yborder-color
. - Las propiedades abrevadas de CSS relacionadas con el color para los bordes:
border-right-color
,border-bottom-color
, yborder-left-color
. - Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde :
border-top-style
yborder-top-width
.