border-top-color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
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.
css
/*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 |
| Valor calculado | computed color |
| Animation type | a color |
Sintaxis
La propiedad border-top-color es especificada con un valor unico.
Valores
<color>-
El color superior del borde
Sintaxis Formal
border-top-color =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
Ejemplos
Un div simple con un borde
HTML
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
css
.mybox {
border: solid 0.3em gold;
border-top-color: red;
width: auto;
}
.redtext {
color: red;
}
Resultado
Especificaciones
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-color |
Compatibilidad con navegadores
Loading…
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-styleyborder-top-width.