Propiedad CSS border-bottom
CSS border-bottom define el ancho, estilo y color del borde inferior de un elemento en una sola declaración. Sintaxis, valores y ejemplos.
La propiedad border-bottom es un atajo CSS que define el ancho, el estilo y el color del borde inferior de un elemento en una sola declaración. En lugar de escribir tres propiedades longhands por separado, se establecen todas a la vez:
/* Longhand — three declarations */
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #1c87c9;
/* Shorthand — one declaration, same result */
border-bottom: 3px solid #1c87c9;Esta página cubre la sintaxis, los valores aceptados, ejemplos prácticos y el error más común (un estilo ausente) para que el borde realmente se muestre.
Cómo se comportan los valores
Puedes listar los tres valores en cualquier orden, pero el orden recomendado es ancho, estilo, color. Cualquier valor que omitas vuelve a su valor predeterminado:
- Ancho omitido → predeterminado a
medium(aproximadamente 3px en la mayoría de los navegadores). - Color omitido → predeterminado a
currentColor, es decir, el color del texto del elemento. - Estilo omitido → predeterminado a
none, lo que significa que el borde no se renderiza en absoluto.
Ese último punto es la razón número uno por la que border-bottom "no funciona": sin un border-style, el navegador no dibuja nada sin importar el ancho o el color que se establezca.
/* Renders nothing — no style given */
.no-border { border-bottom: 5px #1c87c9; }
/* Renders a 5px blue solid line */
.works { border-bottom: 5px solid #1c87c9; }Cuándo usar border-bottom
Recurre a border-bottom cuando quieras una línea en solo un lado de un elemento en lugar de un borde completo. Casos comunes:
- Encabezados subrayados o divisores de sección — una línea más gruesa y de color bajo un
<h2>. - Indicadores de pestañas/navegación — resaltar el enlace activo con un borde inferior.
- Campos de entrada — el estilo "Material Design" usa solo un borde inferior en lugar de un cuadro completo.
Si necesitas el mismo borde en los cuatro lados, usa el atajo border en su lugar. Para los otros lados individuales, consulta border-top, border-left y border-right.
| Valor inicial | medium none currentColor |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | No. |
| Animable | Sí. El color y el ancho del border-bottom son animables. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderBottom = "15px dotted blue"; |
Sintaxis
Sintaxis de la propiedad CSS border-bottom
border-bottom: border-width | border-style | border-color | initial | inherit;Ejemplo de la propiedad border-bottom:
Ejemplo de la propiedad CSS border-bottom con el valor groove
<!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>Ejemplo del uso de la propiedad border-bottom con los elementos <h2>, <p> y <div>:
Ejemplo de la propiedad CSS border-bottom con los valores dashed, double y ridge
<!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>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. |
Propiedades relacionadas
border— el atajo para todos los lados.border-top,border-left,border-right— los otros atajos por lado.border-bottom-width,border-bottom-style,border-bottom-color— las tres propiedades longhands a las que se expandeborder-bottom.border-style,border-width,border-color— controlan los cuatro lados a la vez por aspecto.