Propiedad CSS border-bottom-color
La propiedad CSS border-bottom-color se utiliza para especificar el color del borde inferior de un elemento.
Primero, debes definir las border-style o las border-bottom-style, ya que un elemento debe tener un borde antes de poder cambiar su color.
El color del borde inferior también se puede definir con la propiedad abreviada border-color.
| Valor inicial | currentColor |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredable | No |
| Animable | Sí. El color del borde inferior es animable. |
| Versión | CSS1. |
| Sintaxis DOM | object.style.borderBottomColor = "blue"; |
Sintaxis
Sintaxis de la propiedad CSS border-bottom-color
border-bottom-color: color | transparent | initial | inherit;Ejemplo de la propiedad border-bottom-color:
Ejemplo de la propiedad CSS border-bottom-color con un valor de color
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: solid;
border-bottom-color: #1c87c9;
border-bottom-width: 5px;
}
</style>
</head>
<body>
<h2> A heading with a solid blue bottom border</h2>
</body>
</html>Resultado
Ejemplo de la propiedad border-bottom-color, donde se agregan colores a diferentes elementos HTML para mostrar el efecto del color:
Ejemplo de la propiedad CSS border-bottom-color con la propiedad border-style
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: groove;
border-bottom-color: #8ebf42;
border-bottom-width: 5px;
}
div {
border-style: inset;
border-bottom-color: #ccc;
border-bottom-width: 8px;
}
p {
border-style: double;
border-bottom-color: #1c87c9;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>A heading with a groove green bottom border.</h2>
<div>A div element with an inset gray bottom border.</div>
<p>A paragraph with a double blue border.</p>
</body>
</html>Ejemplo de la propiedad border-bottom-color con el valor "transparent":
Ejemplo de la propiedad CSS border-bottom-color con valor transparente
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: #666 dashed;
border-bottom-color: transparent;
padding: 8px;
}
</style>
</head>
<body>
<h2>Example of transparent border-bottom-color</h2>
<div>This is an example of a div element which has a transparent border-bottom-color.</div>
</body>
</html>Puedes establecer valores hexadecimales, RGB, RGBA, HSL, HSLA o nombres de colores como valor para la propiedad border-bottom-color.
éxito
Más información sobre Colores HTML.
Ejemplo de la propiedad border-bottom-color con el valor "color":
Ejemplo de la propiedad CSS border-bottom-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-bottom-color: lightblue;
}
.hex {
border-bottom-color: #1c87c9;
}
.rgb {
border-bottom-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-bottom-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Bottom border with a named color.</p>
<p class="hex">Bottom border with a hexadecimal value.</p>
<p class="rgb">Bottom border with a RGB color value.</p>
<p class="hsl">Bottom border with a HSL color value.</p>
</body>
</html>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| color | Indica el color del borde inferior. El color predeterminado es el color del elemento. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla(). Valor requerido. | Probarlo » |
| transparent | Indica que el color del borde debe ser transparente. El borde inferior seguirá ocupando el espacio definido por el valor border-width. | Probarlo » |
| initial | Establece la propiedad en su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad 'border-bottom-color' en CSS?