Propiedad border-color de CSS
La propiedad CSS border-color establece el color de los cuatro lados del borde de un elemento. Corresponde a las siguientes propiedades:
Cada lado puede tener su propio valor. La propiedad border-color se utiliza junto con la propiedad border-style. Si el border-width es 0, o si border-style es none o hidden, el color del borde no será visible.
Esta propiedad acepta cualquier valor de colores CSS. El color predeterminado es el color actual del elemento.
La propiedad border-color puede tener 4 valores. Si tiene un valor, el color se aplica a los cuatro bordes. Si tiene dos valores, el primer valor se establece para los bordes superior e inferior, y el segundo valor para los bordes derecho e izquierdo. Si tiene tres valores, el primero se aplica al borde superior, el segundo a los bordes derecho e izquierdo, y el tercero al borde inferior. Si tiene cuatro valores, el primero se establece para el superior, el segundo para el derecho, el tercero para el inferior y el cuarto para el izquierdo.
| Valor inicial | currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | No. |
| Animable | Sí. Los bordes de la caja son animables. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderColor = "red"; |
Sintaxis
Sintaxis de la propiedad border-color de CSS
border-color: color | transparent | initial | inherit;A continuación se muestra un ejemplo donde se aplica un solo valor. Establece el color para los cuatro lados del elemento.
Ejemplo de la propiedad border-color:
Ejemplo de la propiedad CSS border-color con un solo valor
<!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
Veamos otro ejemplo donde se aplican cuatro valores. El primero se aplica al borde superior, el segundo al derecho, el tercero al inferior y el cuarto al izquierdo.
Ejemplo de la propiedad border-color con 4 valores:
Ejemplo de la propiedad CSS border-color con 4 valores
<!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>Puede establecer valores hexadecimales, RGB, RGBA, HSL, HSLA o nombres de colores como valor para la propiedad border-color.
éxito
Más información sobre Colores HTML.
Ejemplo de la propiedad border-color con el valor "color":
Ejemplo de la propiedad CSS border-color con valores hexadecimales, RGB, HSL y nombres de colores
<!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>Valores
| Valor | Descripción | Probar » |
|---|---|---|
| color | Establece un color para los bordes. El color predeterminado es el color actual del elemento. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla(). Opcional. Predeterminado a currentColor. | Probar » |
| transparent | Hace que el color del borde sea transparente. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles de las siguientes afirmaciones son verdaderas sobre la propiedad 'border-color' en CSS?