La Propiedad BORDER-BOTTOM-STYLE

La propiedad border-bottom-style en CSS se utiliza para establecer la apariencia o el estilo del borde inferior de un elemento HTML.

La propiedad border-bottom-style en CSS se utiliza para establecer la apariencia o el estilo del borde inferior de un elemento HTML. Es crucial entender que, aunque definas un ancho y un color para el borde inferior, este no será visible a menos que especifiques un estilo.

Sintaxis Básica

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

CSS 

selector {
  border-bottom-style: <estilo>;
}

Donde <estilo> es uno de los siguientes valores que definen la apariencia del borde inferior.

Valores de la Propiedad `border-bottom-style`

A continuación, se describen los diferentes valores que puedes usar para la propiedad border-bottom-style:

none: No se muestra ningún borde inferior. El ancho del borde se considera 0.

CSS 

.sin-borde-inferior {
  border-bottom-width: 5px; /* Aunque definamos un ancho */
  border-bottom-color: red;
  border-bottom-style: none; /* No se mostrará ningún borde */
}

hidden: Similar a none, pero tiene un comportamiento diferente en tablas con bordes colapsados. En la mayoría de los casos, se comporta igual que none.

CSS 

.oculto-borde-inferior {
  border-bottom-width: 5px;
  border-bottom-color: blue;
  border-bottom-style: hidden; /* El borde no será visible */
}

dotted: El borde inferior se muestra como una serie de puntos.

CSS 

.borde-punteado {
  border-bottom-width: 3px;
  border-bottom-color: green;
  border-bottom-style: dotted; /* Borde inferior punteado */
}

dashed: El borde inferior se muestra como una serie de guiones.

CSS 

.borde-guiones {
  border-bottom-width: 3px;
  border-bottom-color: orange;
  border-bottom-style: dashed; /* Borde inferior con guiones */
}

solid: El borde inferior se muestra como una línea continua. Este es uno de los estilos más comunes.

CSS 

.borde-solido {
  border-bottom-width: 3px;
  border-bottom-color: purple;
  border-bottom-style: solid; /* Borde inferior sólido */
}

double: El borde inferior se muestra como dos líneas sólidas paralelas. El ancho total del borde será la suma del ancho especificado para el borde y el espacio entre las dos líneas.
CSS
```
.borde-doble {
  border-bottom-width: 5px; /* El ancho total será mayor */
  border-bottom-color: brown;
  border-bottom-style: double; /* Borde inferior doble */
}
```

groove: El borde inferior parece estar tallado en el lienzo. El efecto es tridimensional y depende del color del borde.

CSS 

.borde-ranura {
  border-bottom-width: 5px;
  border-bottom-color: teal;
  border-bottom-style: groove; /* Borde inferior con efecto de ranura */
}

ridge: El borde inferior parece sobresalir del lienzo, creando un efecto tridimensional opuesto al de groove. También depende del color del borde.

CSS 

.borde-cresta {
  border-bottom-width: 5px;
  border-bottom-color: navy;
  border-bottom-style: ridge; /* Borde inferior con efecto de cresta */
}

inset: El contenido del elemento parece estar incrustado dentro de un borde tridimensional.

CSS 

.borde-incrustado {
  border-bottom-width: 5px;
  border-bottom-color: silver;
  border-bottom-style: inset; /* Borde inferior con efecto incrustado */
}

outset: El contenido del elemento parece sobresalir del borde tridimensional, lo opuesto a inset.

CSS 

.borde-sobresaliente {
  border-bottom-width: 5px;
  border-bottom-color: gold;
  border-bottom-style: outset; /* Borde inferior con efecto sobresaliente */
}

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo puedes usar la propiedad border-bottom-style en diferentes elementos HTML:

Ejemplo 1: Separador horizontal con estilo de guiones

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  h2 {
    border-bottom-width: 2px;
    border-bottom-style: dashed;
    border-bottom-color: #ccc;
    padding-bottom: 10px;
  }
</style>
</head>
<body>

  <h2>Título de la Sección</h2>
  <p>Este es el contenido de la sección.</p>

</body>
</html>

En este ejemplo, se agrega una línea de guiones gris delgada debajo del encabezado h2.

Ejemplo 2: Borde inferior sólido en un botón

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  button {
    padding: 10px 20px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: blue;
    background-color: white;
    cursor: pointer;
  }
</style>
</head>
<body>

  <button>Haz clic aquí</button>

</body>
</html>

Aquí, el botón tendrá una línea sólida azul en la parte inferior.

Ejemplo 3: Borde inferior punteado en un enlace al pasar el ratón

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  a {
    text-decoration: none;
    color: black;
  }

  a:hover {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: black;
  }
</style>
</head>
<body>

  <a href="#">Este es un enlace</a>

</body>
</html>

Al pasar el ratón sobre el enlace, aparecerá un borde inferior punteado.

Relación con Otras Propiedades de Borde Inferior

Recuerda que border-bottom-style trabaja en conjunto con:

border-bottom-width: Define el grosor del borde. Si el ancho es 0, el estilo no será visible.
border-bottom-color: Define el color del borde. Sin un color, el estilo (excepto en algunos casos tridimensionales) no será perceptible.

También puedes usar la propiedad abreviada border-bottom para establecer el ancho, el estilo y el color en una sola línea:

CSS 

selector {
  border-bottom: 2px dashed purple; /* Establece ancho, estilo y color a la vez */
}

Compatibilidad del Navegador

La propiedad border-bottom-style es compatible con todos los navegadores web modernos.

Consideraciones

Siempre asegúrate de definir un border-bottom-width y un border-bottom-color junto con border-bottom-style para que el borde sea visible, a menos que el estilo sea none o hidden.
La elección del estilo del borde puede influir significativamente en la apariencia visual de tu diseño.

Conclusión

La propiedad border-bottom-style es esencial para dar forma a la línea inferior de tus elementos HTML. Al combinarla con el ancho y el color adecuados, puedes crear una variedad de efectos visuales que mejoran la estructura y el diseño de tu página web. Experimenta con los diferentes estilos para encontrar el que mejor se adapte a tus necesidades.