Propiedad border-bottom-width

DefiniciónEstablece la anchura del borde inferior de los elementos
Valores
permitidos
Uno y sólo uno de los siguientes valores:
Valor inicialmedium
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/box.html#propdef-border-bottom-width

Ejemplos de uso

La propiedad border-bottom-width permite establecer la anchura del borde inferior de un elemento de diferentes formas. En primer lugar, es posible utilizar las palabras thin, medium y thick para mostrar un borde fino, normal y grueso respectivamente:

div { border-bottom-width: thin; }
div { border-bottom-width: medium; }
div { border-bottom-width: thick; }

Como la especificación oficial no define de forma explícita el valor que corresponde a thin, medium y thick, cada navegador los muestra de un grosor diferente. Por este motivo no suelen utilizarse estas palabras especiales, ya que es imposible diseñar con ellas una página que muestre el mismo aspecto en diferentes navegadores.

Normalmente, el grosor de los bordes se establece mediante una medida. La unidad de medida que más se utiliza es el píxel, ya que permite un control más preciso sobre el grosor del borde:

div { border-bottom-width: 3px; }

Si se utiliza em como unidad de medida, su referencia es el tamaño de letra del propio elemento. En el siguiente ejemplo, el grosor del borde inferior de los dos elementos es 0.3em. Sin embargo, como el tamaño de letra del segundo <div> es mayor, su borde inferior es más grueso:

div { border-bottom-width: 0.3em; font-size: 1em; }
div { border-bottom-width: 0.3em; font-size: 2em; }

Para eliminar el borde inferior de un elemento, se puede utilizar la propiedad border-bottom-width asignándole un grosor igual a 0:

div { border-bottom-width: 0; }