Propiedad CSS border-bottom-style – Todos los valores con ejemplos

La propiedad CSS border-bottom-style establece el estilo de línea del borde inferior de un elemento — ya sea que se dibuje como una línea sólida, una serie de guiones, un surco 3D, entre otros. Controla únicamente el borde inferior, dejando los otros tres lados sin modificar.

Usa esta propiedad cuando quieras estilizar un lado de forma independiente — por ejemplo, un divisor estilo subrayado debajo de un encabezado, o una línea inferior discontinua en una tarjeta. Cuando quieras el mismo estilo en los cuatro lados, el atajo border-style es más conciso.

La propiedad border-bottom-style no tiene efecto visible por sí sola a menos que también estén presentes un color y un ancho de borde. Combínala con border-bottom-width y border-bottom-color, o establece todo a la vez con el atajo border-bottom. La excepción es none (el valor por defecto), que elimina el borde por completo independientemente del ancho o el color.

Información

La especificación CSS no define cómo se conectan los bordes de diferentes estilos en las esquinas, por lo que los lados adyacentes con estilos distintos pueden unirse de formas específicas según el navegador.

Valor inicial	`none`
Se aplica a	Todos los elementos.
Heredado	No.
Animable	No.
Versión	CSS1
Sintaxis DOM	`object.style.borderBottomStyle = "dotted";`

Sintaxis

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Valores

Valor	Descripción
`none`	No se dibuja ningún borde. Valor por defecto.
`hidden`	Mismo resultado visual que `none` en elementos normales, pero suprime los bordes adyacentes en la resolución de conflictos de bordes de tablas.
`dotted`	Una serie de puntos redondos.
`dashed`	Una serie de guiones cortos.
`solid`	Una única línea continua.
`double`	Dos líneas sólidas paralelas. El grosor combinado más el espacio entre ellas equivale al valor de `border-bottom-width`.
`groove`	Un efecto 3D que hace que el borde parezca tallado en la página. Lo opuesto de `ridge`.
`ridge`	Un efecto 3D que hace que el borde parezca elevado sobre la página. Lo opuesto de `groove`.
`inset`	Un efecto 3D que hace que todo el elemento parezca hundido en la página. Lo opuesto de `outset`.
`outset`	Un efecto 3D que hace que todo el elemento parezca sobresalir de la página. Lo opuesto de `inset`.
`initial`	Establece la propiedad en su valor por defecto (`none`).
`inherit`	Hereda el valor del elemento padre.

Ejemplos

Bordes sólido y discontinuo

Los valores más utilizados son solid y dashed. Aquí un encabezado obtiene un borde inferior sólido y un div obtiene uno discontinuo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: solid;
      }
      div {
        border-bottom-style: dashed;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a solid bottom border</h2>
    <div>A div element with a dashed bottom border.</div>
  </body>
</html>

Pruébalo tú mismo »

Bordes doble, discontinuo y con surco

Este ejemplo combina varios valores. Ten en cuenta que groove y otros estilos 3D necesitan un borde más ancho (aquí 8px) para ser visibles — los bordes delgados aplanan el sombreado 3D.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: double;
      }
      p {
        border-style: solid;
        border-bottom-style: dashed;
      }
      div {
        border-bottom-style: groove;
        border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a double bottom border</h2>
    <p>A paragraph with a dashed bottom border (overrides the solid shorthand on the bottom side).</p>
    <div>A div element with a groove bottom border.</div>
  </body>
</html>

Pruébalo tú mismo »

El valor `hidden`

hidden se ve idéntico a none en un elemento normal, pero se comporta de forma diferente en la resolución de conflictos de bordes de tablas: un borde hidden siempre prevalece y suprime el borde de la celda vecina.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid black;
        border-bottom-style: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Border on three sides — bottom is hidden</h1>
  </body>
</html>

Pruébalo tú mismo »

El valor `inset`

inset es un estilo 3D que hace que la caja parezca hundida dentro de la página. El sombreado se deriva del color del borde, por lo que es más visible con un borde más ancho.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid;
        border-bottom-style: inset;
      }
    </style>
  </head>
  <body>
    <h1>Inset bottom border example</h1>
  </body>
</html>

Pruébalo tú mismo »

El valor `outset`

outset es lo opuesto de inset: hace que la caja parezca elevada por encima de la página. En conjunto, inset, outset, groove y ridge son los cuatro estilos de borde 3D, y los cuatro dependen del color del borde para crear su efecto de sombreado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        border: 5px solid;
        border-bottom-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Outset bottom border example</h1>
  </body>
</html>

Pruébalo tú mismo »

Cuándo usar cada valor

solid — la opción predeterminada para la mayoría de los elementos de interfaz (tarjetas, entradas, divisores).
dashed y dotted — útiles para divisores secundarios, zonas de arrastrar y soltar, o cualquier elemento que necesite un peso visual más ligero que una línea sólida.
double — se usa ocasionalmente para encabezados decorativos; se necesita un ancho mínimo de 3px para ver ambas líneas y el espacio entre ellas.
groove / ridge — efectos 3D clásicos; raramente usados en interfaces planas modernas, pero siguen siendo válidos.
inset / outset — pueden simular efectos de presión de botón; considera usar box-shadow en su lugar para un control más preciso.
hidden — principalmente una herramienta para el diseño de tablas; evítalo en elementos que no sean tablas, donde none es más claro.

Errores comunes

Un estilo de borde solo no renderiza nada si border-bottom-width es 0 o border-bottom-color es transparent. Siempre verifica que las tres sub-propiedades del borde estén establecidas.
Sobrescribir el atajo border-bottom después de border-bottom-style restablece el estilo a none. El orden de las declaraciones importa.
El valor double requiere al menos 3px de ancho para renderizar dos líneas distintas.
Los cuatro valores 3D (groove, ridge, inset, outset) pueden verse idénticos a ridge/groove en algunos navegadores cuando el color del borde es currentColor sobre un fondo oscuro — siempre prueba con un color explícito.

Propiedades relacionadas

border-bottom — atajo para el ancho, estilo y color del borde inferior.
border-bottom-width — establece el grosor del borde inferior.
border-bottom-color — establece el color del borde inferior.
border-style — establece el estilo de línea para los cuatro lados a la vez.
border-top-style — la propiedad equivalente para el borde superior.
border-left-style — la propiedad equivalente para el borde izquierdo.
border-right-style — la propiedad equivalente para el borde derecho.

Práctica

¿Cuáles de los siguientes son valores válidos para la propiedad border-bottom-style en CSS?

Sintaxis

Valores

Ejemplos

Bordes sólido y discontinuo

Bordes doble, discontinuo y con surco

El valor hidden

El valor inset

El valor outset

Cuándo usar cada valor

Errores comunes

Propiedades relacionadas

Práctica

El valor `hidden`

El valor `inset`

El valor `outset`