Propiedad CSS border-bottom-color

La propiedad CSS border-bottom-color establece el color únicamente del borde inferior de un elemento. Es una de las cuatro propiedades de color de un solo lado, junto con border-top-color, border-right-color y border-left-color.

Un borde tiene tres componentes: un estilo, un ancho y un color. Un borde es invisible hasta que se le asigna un estilo, por lo que border-bottom-color no hace nada por sí sola. Antes (o junto con) ella, debes declarar un estilo mediante border-style o border-bottom-style; de lo contrario, el estilo toma el valor predeterminado none y no se pinta ningún borde, independientemente del color que establezcas.

Cuándo usarla

Utiliza border-bottom-color cuando quieras colorear solo el borde inferior y dejar los otros tres lados sin modificar. Casos comunes:

Encabezados y enlaces con estilo de subrayado — un borde inferior que cambia de color en :hover o :focus sin desplazar el diseño (a diferencia de text-decoration).
Barras de pestañas y estados activos — un borde inferior de color marca la pestaña seleccionada.
Recolorar un lado de un borde uniforme — establece los cuatro lados con el shorthand border-color y luego sobreescribe el inferior con border-bottom-color.

El valor predeterminado es currentColor, lo que significa que si no estableces ningún color, el borde toma el color del texto del elemento. El color del borde inferior también puede establecerse como parte del shorthand border-color (su tercer valor) o del shorthand border-bottom.

Valor inicial	currentColor
Se aplica a	Todos los elementos.
Heredado	No
Animable	Sí. El color del border-bottom es animable.
Versión	CSS1.
Sintaxis DOM	object.style.borderBottomColor = "blue";

Sintaxis

Sintaxis de la propiedad CSS border-bottom-color

border-bottom-color: color | transparent | initial | inherit;

Ejemplo de la propiedad border-bottom-color:

Ejemplo de la propiedad CSS border-bottom-color con valor de color

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom-style: solid;
        border-bottom-color: #1c87c9;
        border-bottom-width: 5px;
      }
    </style>
  </head>
  <body>
    <h2> A heading with a solid blue bottom border</h2>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad border-bottom-color donde se añaden colores a distintos elementos HTML para mostrar el efecto del color:

Ejemplo de la propiedad CSS border-bottom-color con la propiedad border-style

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom-style: groove;
        border-bottom-color: #8ebf42;
        border-bottom-width: 5px;
      }
      div {
        border-style: inset;
        border-bottom-color: #ccc;
        border-bottom-width: 8px;
      }
      p {
        border-style: double;
        border-bottom-color: #1c87c9;
        border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a groove green bottom border.</h2>
    <div>A div element with an inset gray bottom border.</div>
    <p>A paragraph with a double blue border.</p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad border-bottom-color con el valor "transparent":

Ejemplo de la propiedad CSS border-bottom-color con valor transparent

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: #666 dashed;
        border-bottom-color: transparent;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of transparent border-bottom-color</h2>
    <div>This is an example of a div element which has a transparent border-bottom-color.</div>
  </body>
</html>

Pruébalo tú mismo »

Ten en cuenta que transparent no es lo mismo que no tener borde: el borde inferior sigue ocupando el espacio definido por border-bottom-width, simplemente es invisible. Esto resulta útil para reservar espacio en el diseño que se revela al pasar el cursor o al recibir el foco.

Puedes usar valores hexadecimales, RGB, RGBA, HSL, HSLA o nombres de color como valor de la propiedad border-bottom-color.

Consejo

Aprende más sobre colores HTML.

Ejemplo de la propiedad border-bottom-color con el valor "color":

Ejemplo de la propiedad CSS border-bottom-color con valores hexadecimales, RGB, HSL y nombres de color

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border: 5px solid #666;
        width: 60%;
        padding: 5px;
      }
      .name {
        border-bottom-color: lightblue;
      }
      .hex {
        border-bottom-color: #1c87c9;
      }
      .rgb {
        border-bottom-color: rgba(0, 0, 0, 0.15);
      }
      .hsl {
        border-bottom-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <p class="name">Bottom border with a named color.</p>
    <p class="hex">Bottom border with a hexadecimal value.</p>
    <p class="rgb">Bottom border with a RGB color value.</p>
    <p class="hsl">Bottom border with a HSL color value.</p>
  </body>
</html>

Pruébalo tú mismo »

Advertencia

border-bottom-color acepta un único valor de color. Si se indican varios colores, solo se usa el primero válido. Para colorear los cuatro lados a la vez, usa el shorthand border-color.

Valores

Valor	Descripción	Pruébalo
color	Indica el color del borde inferior. El color predeterminado es el color del elemento. Se pueden usar nombres de color, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla(). Valor requerido.	Pruébalo »
transparent	Indica que el color del borde debe ser transparente. El borde inferior seguirá ocupando el espacio definido por el valor de border-width.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

border-bottom — shorthand para el ancho, el estilo y el color del borde inferior en una sola declaración.
border-bottom-style y border-bottom-width — las otras dos piezas que necesita un borde inferior.
border-color — establece el color de los cuatro lados a la vez.
border-top-color, border-right-color, border-left-color — colorea los otros tres bordes.

Práctica

¿Qué hace la propiedad 'border-bottom-color' en CSS?

Establece el color del borde superior de un elementoCambia el grosor del borde inferior de un elementoEstablece el color del borde inferior de un elementoCambia el estilo del borde inferior de un elementoCambia el color del texto dentro de un elemento