Propiedad CSS border-color
La propiedad CSS border-color es una propiedad abreviada que aplica color a los cuatro lados de un elemento. Consulta valores y ejemplos.
La propiedad CSS border-color establece el color del borde de un elemento. Es una abreviatura que permite definir el color de los cuatro lados a la vez, o asignar un color diferente a cada lado. Corresponde a las cuatro propiedades individuales:
Esta página abarca la sintaxis, las formas de uno a cuatro valores, los formatos de color que se pueden usar y los errores comunes que hacen que el color del borde sea invisible sin dar ningún aviso.
Cuándo se muestra el color
border-color solo pinta un borde si realmente existe un borde que pintar. El color se usa junto con las propiedades border-style y border-width. El borde permanece invisible si:
border-styleesnoneohidden(el valor predeterminado esnone), oborder-widthes0.
En otras palabras, definir border-color por sí solo no tiene ningún efecto; siempre se necesita un estilo. La mayoría de las personas establecen los tres valores a la vez con la abreviatura border.
Esta propiedad acepta cualquier valor de color CSS. El valor predeterminado es currentColor, lo que significa que el borde hereda el valor de color del elemento a menos que se cambie.
Formas de uno a cuatro valores
border-color sigue el patrón estándar de abreviatura de bordes en CSS, por lo que el número de valores que se pasan determina a qué lados se aplican:
| Valores | top | right | bottom | left |
|---|---|---|---|---|
red | red | red | red | red |
red green | red | green | red | green |
red green blue | red | green | blue | green |
red green blue gold | red | green | blue | gold |
Una forma fácil de recordar el orden de cuatro valores es "en sentido horario desde arriba": top, right, bottom, left.
Resumen de la propiedad
| Valor inicial | currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredada | No. |
| Animable | Sí. Los bordes del cuadro son animables. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderColor = "red"; |
Sintaxis
Sintaxis de la propiedad CSS border-color
border-color: color | transparent | initial | inherit;Ejemplos
Un solo color para todos los lados
Cuando se pasa un valor, establece el color de los cuatro lados del elemento.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.dotted {
border-style: dotted;
border-color: #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<div class="dotted">Example with blue dotted border.</div>
</body>
</html>Resultado
Un color diferente por lado
Aquí se aplican cuatro valores: el primero al borde superior, el segundo al derecho, el tercero al inferior y el cuarto al izquierdo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
border-style: solid;
border-color: #1c87c9 cyan yellow #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<div class="solid">Example with border-color property.</div>
</body>
</html>Uso de diferentes formatos de color
Puedes establecer un color hexadecimal, RGB, RGBA, HSL, HSLA o un color con nombre como valor de border-color. El siguiente ejemplo usa uno de cada tipo.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-color: lightblue;
}
.hex {
border-color: #1c87c9;
}
.rgb {
border-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Border with a named color.</p>
<p class="hex">Border with a hexadecimal value.</p>
<p class="rgb">Border with a RGB color value.</p>
<p class="hsl">Border with a HSL color value.</p>
</body>
</html>Aprende más sobre los formatos de color que admite CSS en HTML Colors.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| color | Establece un color para los bordes. El color predeterminado es el color actual del elemento. Se pueden usar nombres de color, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla(). Opcional. El valor predeterminado es currentColor. | Pruébalo » |
| transparent | Hace que el color del borde sea transparente. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |