Propiedad CSS border-bottom-width
Usa la propiedad border-bottom-width para definir el ancho del borde inferior de un elemento. Aprende sus valores y cómo aplicarla en CSS.
La propiedad border-bottom-width establece el ancho (grosor) del borde inferior de un elemento. Controla únicamente el borde inferior; para aplicar estilo a los cuatro lados a la vez, utiliza la forma abreviada border-width.
Esta página explica qué valores acepta border-bottom-width, por qué necesita un estilo de borde para mostrarse, la diferencia entre las palabras clave thin/medium/thick y longitudes explícitas, y cómo se relaciona con las demás propiedades de ancho por lado.
Por qué el ancho a menudo no muestra nada
Para ver el efecto de border-bottom-width, también debes establecer un estilo de borde con la propiedad border-style o border-bottom-style. El estilo de borde inicial es none, y un borde con estilo none nunca se renderiza sin importar el ancho que se le asigne; por eso el ancho por sí solo no tiene efecto visual.
/* Invisible: no style set */
.box { border-bottom-width: 10px; }
/* Visible: width + style together */
.box { border-bottom-width: 10px; border-bottom-style: solid; }Valores aceptados
Puedes definir el ancho de dos formas:
- Longitud — cualquier longitud CSS como
4px,0.25emo0.1rem. Es la opción más predecible porque el resultado es exactamente el que especificas. Las longitudes negativas no están permitidas y se tratan como inválidas. - Palabras clave —
thin,mediumothick. La especificación no define un grosor exacto en píxeles para cada palabra clave; el resultado preciso depende de la implementación. Las palabras clave siempre siguen el patrónthin≤medium≤thick, y una palabra clave determinada permanece constante dentro de un mismo documento. En la mayoría de los navegadores se asignan aproximadamente a1px,3pxy5px.
Si necesitas que el ancho sea consistente entre navegadores, prefiere una longitud explícita en lugar de las palabras clave.
| Valor inicial | medium |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. El ancho puede animarse. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderBottomWidth = "5px"; |
Sintaxis
Sintaxis de la propiedad CSS border-bottom-width
border-bottom-width: medium | thin | thick | length | initial | inherit;Ejemplo de la propiedad border-bottom-width:
Ejemplo de la propiedad CSS border-bottom-width con el valor thick
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-bottom-width: thick;
}
</style>
</head>
<body>
<p>
As you can see, we used border-bottom-width property to set the width of bottom border of this element.
</p>
</body>
</html>Resultado
Ejemplo de la propiedad border-bottom-width con el valor "medium":
Ejemplo de la propiedad CSS border-bottom-width con el valor medium
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
border-bottom-style: groove;
border-bottom-width: medium;
}
div {
border-style: groove;
border-bottom-width: medium;
}
</style>
</head>
<body>
<h2>A heading with a medium bottom border.</h2>
<div>A div element with a medium bottom border.</div>
</body>
</html>Ejemplo de la propiedad border-bottom-width que muestra la diferencia entre los valores "thin" y "thick":
Ejemplo de la propiedad CSS border-bottom-width con el valor thin
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
padding: 5px;
border-bottom-style: ridge;
border-bottom-width: thin;
border-color: #cccccc;
}
div {
padding: 5px;
border-style: ridge;
border-bottom-width: thick;
}
</style>
</head>
<body>
<h2>A heading with thin bottom border</h2>
<div>A div element with thick bottom border.</div>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| medium | Establece un borde inferior de grosor medio. Es el valor predeterminado. | Pruébalo » |
| thin | Establece un borde inferior fino. | Pruébalo » |
| thick | Establece un borde inferior grueso. | Pruébalo » |
| length | Establece el ancho del borde inferior a un valor de longitud específico. | Pruébalo » |
| initial | Establece la propiedad a su valor predeterminado. | Pruébalo » |
| inherit | Hereda el valor de la propiedad de su elemento padre. |
Propiedades relacionadas
border-bottom-width es una de las cuatro propiedades de ancho por lado. Usa la correspondiente para cada borde, o la forma abreviada cuando quieras establecer varios a la vez:
- border-top-width, border-right-width, border-left-width — los otros tres bordes individuales.
- border-width — forma abreviada que establece los cuatro anchos en una sola declaración.
- border-bottom-style y border-bottom-color — el estilo y el color del mismo borde inferior.
- border-bottom — forma abreviada para el ancho, estilo y color del borde inferior juntos.