Propriedade CSS border-bottom-color

A propriedade CSS border-bottom-color define a cor apenas da borda inferior de um elemento. É uma das quatro propriedades de cor para lados individuais, junto com border-top-color, border-right-color e border-left-color.

Uma borda possui três componentes: um estilo, uma largura e uma cor. A borda permanece invisível até que você defina um estilo, portanto border-bottom-color não tem efeito por si só. Antes (ou junto com ela) você deve declarar um estilo via border-style ou border-bottom-style — caso contrário, o estilo padrão será none e nenhuma borda será renderizada, independentemente da cor definida.

Quando usar

Use border-bottom-color quando quiser colorir apenas a borda inferior e manter os outros três lados sem alteração. Casos de uso comuns:

Títulos e links com estilo de sublinhado — uma borda inferior que muda de cor ao :hover ou :focus sem deslocar o layout (ao contrário de text-decoration).
Barras de abas e estados ativos — uma borda inferior colorida indica a aba selecionada.
Recolorir um lado de uma borda uniforme — defina os quatro lados com o atalho border-color e sobrescreva a borda inferior com border-bottom-color.

O valor padrão é currentColor, o que significa que, se você não definir uma cor, a borda assume a cor do texto do elemento. A cor da borda inferior também pode ser definida como parte do atalho border-color (seu terceiro valor) ou do atalho border-bottom.

Valor Inicial	currentColor
Aplica-se a	Todos os elementos.
Herdado	Não
Animável	Sim. A cor da border-bottom é animável.
Versão	CSS1.
Sintaxe DOM	object.style.borderBottomColor = "blue";

Sintaxe

Sintaxe da propriedade CSS border-bottom-color

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

Exemplo da propriedade border-bottom-color:

Exemplo da propriedade CSS border-bottom-color com valor de cor

<!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>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade border-bottom-color, onde cores são adicionadas a diferentes elementos HTML para demonstrar o efeito de cor:

Exemplo da propriedade CSS border-bottom-color com a propriedade 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>

Experimente Você Mesmo »

Exemplo da propriedade border-bottom-color com o valor "transparent":

Exemplo da propriedade CSS border-bottom-color com 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>

Experimente Você Mesmo »

Note que transparent não é o mesmo que não ter borda: a borda inferior ainda ocupa o espaço definido por border-bottom-width, apenas fica invisível. Isso é útil para reservar espaço no layout que você revela ao passar o mouse ou ao focar.

Você pode usar valores hexadecimais, RGB, RGBA, HSL, HSLA ou nomes de cores como valor para a propriedade border-bottom-color.

Dica

Saiba mais sobre Cores HTML.

Exemplo da propriedade border-bottom-color com o valor "color":

Exemplo da propriedade CSS border-bottom-color com valores hexadecimais, RGB, HSL e nomes de cores

<!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>

Experimente Você Mesmo »

Aviso

border-bottom-color aceita um único valor de cor. Se você listar várias cores, somente a primeira válida será usada. Para colorir os quatro lados ao mesmo tempo, use o atalho border-color.

Valores

Valor	Descrição	Experimente
color	Indica a cor da borda inferior. A cor padrão é a cor do elemento. Podem ser usados nomes de cores, códigos hexadecimais, rgb(), rgba(), hsl(), hsla(). Valor obrigatório.	Experimente »
transparent	Indica que a cor da borda deve ser transparente. A borda inferior ainda ocupará o espaço definido pelo valor de border-width.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

border-bottom — atalho para largura, estilo e cor da borda inferior em uma única declaração.
border-bottom-style e border-bottom-width — os outros dois componentes necessários para uma borda inferior.
border-color — define a cor dos quatro lados ao mesmo tempo.
border-top-color, border-right-color, border-left-color — colorir as outras três bordas.

Prática

O que a propriedade 'border-bottom-color' faz no CSS?

Define a cor da borda superior de um elementoAltera a espessura da borda inferior de um elementoDefine a cor da borda inferior de um elementoAltera o estilo da borda inferior de um elementoAltera a cor do texto dentro de um elemento