La Propiedad BORDER-BOTTOM

Se utiliza para establecer el borde inferior de un elemento HTML. Permite definir el grosor, el estilo y el color del borde inferior de manera rápida y concisa.

La propiedad border-bottom en CSS se utiliza para establecer el borde inferior de un elemento HTML. Permite definir el grosor, el estilo y el color del borde inferior de manera rápida y concisa.

Sintaxis Básica

La propiedad border-bottom es una propiedad abreviada (shorthand) que te permite especificar los valores para las siguientes propiedades individuales en una sola línea:

  • border-bottom-width: Define el grosor del borde inferior.
  • border-bottom-style: Define la apariencia o el estilo del borde inferior.
  • border-bottom-color: Define el color del borde inferior.

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

CSS
 
selector {
  border-bottom: <ancho> <estilo> <color>;
}

Donde:

  • <ancho>: Especifica el grosor del borde. Puede ser una palabra clave (thin, medium, thick) o un valor en unidades de medida (píxeles px, ems em, rems rem, etc.).
  • <estilo>: Define la apariencia o el estilo del borde. Hay varios estilos disponibles (como solid, dashed, dotted, etc.).
  • <color>: Establece el color del borde. Puede ser un nombre de color (red, blue), un valor hexadecimal (#FF0000), un valor RGB (rgb(255, 0, 0)), etc.

Nota: El orden de los valores para el ancho, el estilo y el color no importa.

Valores de la Propiedad border-bottom

A continuación, se detallan los valores que puedes utilizar para cada componente de la propiedad border-bottom:

1. <ancho> (Width)

Especifica el grosor del borde inferior. Puedes usar:

  • Palabras clave:
    • thin: Un borde delgado.
    • medium: Un borde de grosor medio (valor predeterminado).
    • thick: Un borde grueso.
  • Unidades de medida:
    • px (píxeles): Unidades absolutas.
    • em: Relativo al tamaño de la fuente del elemento.
    • rem: Relativo al tamaño de la fuente del elemento raíz (html).
    • Otras unidades de longitud CSS.

Ejemplos:

CSS
 
.borde-delgado {
  border-bottom: thin solid black;
}

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

.borde-1em {
  border-bottom: 1em dashed blue;
}

2. <estilo> (Style)

Define la apariencia o el estilo del borde inferior. Los valores más comunes son:

  • none: No se muestra ningún borde. El ancho del borde es 0.
  • hidden: Similar a none, pero en conflictos de bordes de tabla, hidden tiene la prioridad más alta.
  • dotted: El borde se muestra como una serie de puntos.
  • dashed: El borde se muestra como una serie de guiones.
  • solid: El borde se muestra como una línea continua.
  • double: El borde se muestra como dos líneas sólidas paralelas. El ancho total es la suma del ancho de las dos líneas y el espacio entre ellas.
  • groove: El borde parece estar tallado en el lienzo. El efecto depende del color del borde.
  • ridge: El borde parece sobresalir del lienzo. El efecto también depende del color del borde.
  • inset: El contenido del elemento parece estar incrustado.
  • outset: El contenido del elemento parece sobresalir.

Ejemplos:

CSS
 
.borde-punteado {
  border-bottom: 2px dotted green;
}

.borde-doble {
  border-bottom: 3px double orange;
}

.borde-ranura {
  border-bottom: 4px groove purple;
}

3. <color> (Color)

Especifica el color del borde inferior. Puedes usar cualquier formato de color CSS válido:

  • Nombres de colores: (red, blue, green, orange, etc.)
  • Valores hexadecimales: (#FF0000, #00FF00, #0000FF, etc.)
  • Valores RGB: (rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255), etc.)
  • Valores RGBA: (rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.7), etc.)
  • Valores HSL: (hsl(0, 100%, 50%), hsl(120, 100%, 50%), etc.)
  • Valores HSLA: (hsla(0, 100%, 50%, 0.5), hsla(120, 100%, 50%, 0.7), etc.)

Ejemplos:

CSS
 
.borde-rojo {
  border-bottom: 2px solid red;
}

.borde-hexadecimal {
  border-bottom: 3px dashed #336699;
}

.borde-rgba {
  border-bottom: 4px dotted rgba(0, 0, 255, 0.8);
}

Ejemplos Prácticos

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

Ejemplo 1: Separador horizontal

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  h2 {
    border-bottom: 2px solid #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 gris delgada debajo del encabezado h2 para actuar como un separador visual.

Ejemplo 2: Borde inferior en un párrafo

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  p.destacado {
    border-bottom: 4px double blue;
    padding-bottom: 5px;
  }
</style>
</head>
<body>

  <p>Este es un párrafo normal.</p>
  <p class="destacado">Este párrafo tiene un borde inferior doble de color azul.</p>

</body>
</html>

Aquí, se aplica un borde inferior doble y grueso de color azul a un párrafo con la clase destacado.

Ejemplo 3: Borde inferior punteado en un enlace

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  a {
    text-decoration: none; /* Opcional: elimina el subrayado predeterminado */
  }

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

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

</body>
</html>

En este caso, al pasar el ratón sobre el enlace, se mostrará un borde inferior punteado de color negro.

Relación con Otras Propiedades de Borde

CSS también proporciona propiedades para controlar los otros bordes de un elemento:

  • border-top: Establece el borde superior.
  • border-left: Establece el borde izquierdo.
  • border-right: Establece el borde derecho.
  • border: Propiedad abreviada para establecer los cuatro bordes a la vez.

También existen las propiedades individuales para controlar el ancho, el estilo y el color de cada borde por separado (por ejemplo, border-top-width, border-right-style, border-left-color, etc.).

Consideraciones

  • Para que un borde sea visible, debes establecer al menos un border-bottom-style con un valor diferente a none o hidden. Si solo defines el ancho o el color, pero no el estilo, no se mostrará ningún borde.
  • La propiedad border-bottom es muy utilizada para crear separadores visuales, resaltar elementos o estilizar la apariencia de diferentes componentes de una página web.

Conclusión

La propiedad border-bottom es una herramienta fundamental en CSS para estilizar la parte inferior de tus elementos HTML. Con ella, puedes controlar el grosor, el estilo y el color del borde inferior de manera sencilla y efectiva, mejorando la apariencia visual de tu sitio web. ¡Experimenta con los diferentes valores y combina las propiedades de borde para lograr los efectos deseados!