La Propiedad BORDER-BOTTOM-WIDTH

La propiedad border-bottom-width en CSS se utiliza para establecer el grosor del borde inferior de un elemento HTML.

La propiedad border-bottom-width en CSS se utiliza para establecer el grosor del borde inferior de un elemento HTML. Es una de las propiedades individuales que componen la propiedad abreviada border-bottom.

Sintaxis Básica

La sintaxis básica para usar la propiedad border-bottom-width es la siguiente:

CSS 

selector {
  border-bottom-width: <ancho>;
}

Donde <ancho> es el grosor que deseas aplicar al borde inferior.

Valores de la Propiedad `border-bottom-width`

Puedes usar los siguientes tipos de valores para especificar el ancho del borde inferior:

Palabras clave:

thin: Especifica un borde delgado. El grosor exacto puede variar entre navegadores, pero suele ser de 1 a 2 píxeles.
medium: Especifica un borde de grosor medio. Es el valor predeterminado si no se especifica un ancho. Su grosor suele ser de 3 a 4 píxeles.
thick: Especifica un borde grueso. Su grosor suele ser de 5 a 6 píxeles.

CSS 

.borde-delgado {
  border-bottom-style: solid; /* Necesitas un estilo para que el ancho sea visible */
  border-bottom-color: black;
  border-bottom-width: thin;
}

.borde-medio {
  border-bottom-style: solid;
  border-bottom-color: black;
  border-bottom-width: medium;
}

.borde-grueso {
  border-bottom-style: solid;
  border-bottom-color: black;
  border-bottom-width: thick;
}

Unidades de medida: Puedes usar cualquier unidad de longitud CSS para especificar el grosor del borde. Las más comunes son:

px (píxeles): Unidades absolutas que representan un punto en la pantalla.
em: Relativo al tamaño de la fuente del elemento actual. 1em equivale al tamaño de la fuente.
rem: Relativo al tamaño de la fuente del elemento raíz (html).
Otras unidades de longitud como pt, cm, mm, etc.

CSS 

.borde-5px {
  border-bottom-style: solid;
  border-bottom-color: red;
  border-bottom-width: 5px;
}

.borde-1em {
  border-bottom-style: dashed;
  border-bottom-color: blue;
  border-bottom-width: 1em; /* El grosor será igual al tamaño de la fuente del elemento */
}

.borde-05rem {
  border-bottom-style: dotted;
  border-bottom-color: green;
  border-bottom-width: 0.5rem; /* El grosor será la mitad del tamaño de la fuente del elemento raíz */
}

Relación con Otras Propiedades de Borde Inferior

Es importante recordar que la propiedad border-bottom-width por sí sola no hará que aparezca un borde. Necesitas establecer también la propiedad border-bottom-style para que el ancho sea visible. Opcionalmente, puedes establecer border-bottom-color para darle un color al borde.

border-bottom-style: Define la apariencia del borde (por ejemplo, solid, dashed, dotted). Si no se establece un estilo, el borde no se mostrará, independientemente del ancho que definas.
border-bottom-color: Define el color del borde. Si no se especifica, el navegador suele usar el color del texto del elemento.

Ejemplo mostrando la necesidad de border-bottom-style:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .sin-estilo {
    border-bottom-width: 5px;
    border-bottom-color: blue; /* El color y el ancho no se mostrarán sin un estilo */
  }

  .con-estilo {
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-bottom-color: blue; /* Este borde azul sólido de 5px se mostrará */
  }
</style>
</head>
<body>

  <div class="sin-estilo">Este div no tendrá un borde inferior visible.</div>
  <div class="con-estilo">Este div tendrá un borde inferior azul sólido de 5 píxeles.</div>

</body>
</html>

Uso Común

La propiedad border-bottom-width se utiliza comúnmente para:

Crear separadores visuales con diferentes grosores: Puedes usar anchos más grandes para separaciones más importantes y anchos más pequeños para separaciones sutiles.
Resaltar elementos importantes: Un borde inferior más grueso puede ayudar a destacar un elemento en la página.
Estilizar la apariencia de diferentes componentes: Por ejemplo, un encabezado podría tener un borde inferior más grueso que un párrafo.
Crear efectos visuales específicos: Combinado con diferentes estilos y colores, el ancho del borde puede contribuir a la estética general del diseño.

Compatibilidad del Navegador

La propiedad border-bottom-width tiene una excelente compatibilidad con todos los navegadores web modernos y también con versiones antiguas.

Consideraciones

Siempre asegúrate de establecer un border-bottom-style junto con border-bottom-width para que el borde sea visible.
La elección de la unidad de medida para el ancho del borde puede depender de tus necesidades de diseño. Los píxeles (px) son unidades absolutas, mientras que em y rem son relativas y pueden adaptarse mejor a diferentes tamaños de pantalla o preferencias de usuario.
Puedes usar la propiedad abreviada border-bottom para establecer el ancho, el estilo y el color en una sola línea, lo que a menudo es más conveniente. Por ejemplo: border-bottom: 3px dashed purple;.

Ejemplo Práctico

Considera un menú de navegación donde quieres una línea más gruesa debajo del elemento activo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .menu a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: black;
  }

  .menu a.activo {
    border-bottom-style: solid;
    border-bottom-color: orange;
    border-bottom-width: 5px; /* Borde inferior más grueso para el elemento activo */
  }

  .menu a:not(.activo) {
    border-bottom-style: solid;
    border-bottom-color: #ccc;
    border-bottom-width: 1px; /* Borde inferior más delgado para los demás elementos */
  }
</style>
</head>
<body>

  <nav class="menu">
    <a href="#">Inicio</a>
    <a href="#" class="activo">Productos</a>
    <a href="#">Servicios</a>
    <a href="#">Contacto</a>
  </nav>

</body>
</html>

En este ejemplo, el enlace con la clase activo tendrá un borde inferior naranja sólido de 5 píxeles, mientras que los otros enlaces tendrán un borde inferior gris sólido de 1 píxel.

Conclusión

La propiedad border-bottom-width te permite controlar el grosor del borde inferior de tus elementos web, lo que es esencial para la presentación visual y la jerarquía de la información en tu diseño. Recuerda siempre combinarla con un estilo para que el borde sea visible y experimenta con diferentes valores y unidades para lograr el efecto deseado.