Propiedad CSS border-bottom
La propiedad border-bottom es una propiedad abreviada para definir el ancho, el estilo y el color del borde inferior. Los valores pueden reordenarse, pero el orden recomendado es ancho, estilo y luego color. Ten en cuenta que border-style es obligatorio para que se muestre el borde; sin él, el borde no aparecerá independientemente del color o el ancho.
Si se omite el ancho, el valor predeterminado es medium. Si se omite el color, hereda el color del elemento padre. Si se omite el estilo, el borde no se mostrará.
| Valor inicial | medium none currentColor |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredable | No. |
| Animable | Sí. El color y el ancho de border-bottom son animables. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderBottom = "15px dotted blue"; |
Sintaxis
Sintaxis de la propiedad CSS border-bottom
css
border-bottom: border-width | border-style | border-color | initial | inherit;Ejemplo de la propiedad border-bottom:
Ejemplo de la propiedad CSS border-bottom con valor groove
html
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>A heading with a groove blue bottom border.</h2>
</body>
</html>Resultado
Ejemplo de uso de la propiedad border-bottom con elementos <h2>, <p> y <div>:
Ejemplo de la propiedad CSS border-bottom con valores dashed, double y ridge
html
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 5px dashed #1c87c9;
}
p {
border-bottom: 8px double #8ebf42;
}
div {
border-bottom: 10px ridge #ccc;
}
</style>
</head>
<body>
<h2>A heading with a dashed blue bottom border.</h2>
<p>A paragraph with a double green bottom border.</p>
<div>A div element with a ridge gray bottom border.</div>
</body>
</html>Resultado
Valores
| Valor | Descripción |
|---|---|
| border-bottom-style | Define el estilo del borde inferior. El valor predeterminado es "none". |
| border-bottom-width | Define el ancho del borde inferior. El valor predeterminado es "medium". |
| border-bottom-color | Define el color del borde inferior. El valor predeterminado es el color del texto. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS 'border-bottom'?