Propriedade CSS border-bottom-style – Todos os Valores com Exemplos

A propriedade CSS border-bottom-style define o estilo de linha da borda inferior de um elemento — se ela é desenhada como uma linha sólida, uma série de traços, um sulco 3D, entre outros. Ela controla apenas a borda inferior, deixando os outros três lados intocados.

Use esta propriedade quando quiser estilizar um lado de forma independente — por exemplo, um divisor no estilo de sublinhado abaixo de um título, ou uma linha tracejada na parte inferior de um card. Quando quiser o mesmo estilo nos quatro lados, o atalho border-style é mais conciso.

A propriedade border-bottom-style não tem efeito visível por si só, a menos que uma cor e uma largura de borda também estejam presentes. Combine-a com border-bottom-width e border-bottom-color, ou defina tudo de uma vez com o atalho border-bottom. A exceção é none (o valor padrão), que remove a borda completamente, independentemente da largura ou cor.

Informação

A especificação CSS não define como bordas de diferentes estilos se conectam nos cantos, portanto lados adjacentes com estilos diferentes podem se unir de formas específicas de cada navegador.

Valor Inicial	`none`
Aplica-se a	Todos os elementos.
Herdado	Não.
Animável	Não.
Versão	CSS1
Sintaxe DOM	`object.style.borderBottomStyle = "dotted";`

Sintaxe

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

Valores

Valor	Descrição
`none`	Nenhuma borda é desenhada. Valor padrão.
`hidden`	Mesmo resultado visual que `none` em elementos normais, mas suprime bordas adjacentes na resolução de conflitos de bordas em tabelas.
`dotted`	Uma série de pontos redondos.
`dashed`	Uma série de traços curtos.
`solid`	Uma única linha contínua.
`double`	Duas linhas sólidas paralelas. A espessura combinada mais o espaço entre elas é igual ao valor de `border-bottom-width`.
`groove`	Um efeito 3D que faz a borda parecer esculpida na página. O oposto de `ridge`.
`ridge`	Um efeito 3D que faz a borda parecer elevada acima da página. O oposto de `groove`.
`inset`	Um efeito 3D que faz o elemento inteiro parecer pressionado para dentro da página. O oposto de `outset`.
`outset`	Um efeito 3D que faz o elemento inteiro parecer elevado para fora da página. O oposto de `inset`.
`initial`	Define a propriedade com seu valor padrão (`none`).
`inherit`	Herda o valor do elemento pai.

Exemplos

Bordas sólidas e tracejadas

Os valores mais usados são solid e dashed. Aqui um título recebe uma borda inferior sólida e um div recebe uma tracejada.

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

Experimente Você Mesmo »

Bordas dupla, tracejada e em sulco

Este exemplo combina vários valores. Observe que groove e outros estilos 3D precisam de uma borda mais larga (aqui 8px) para serem visíveis — bordas finas eliminam o sombreamento 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>

Experimente Você Mesmo »

O valor `hidden`

hidden parece idêntico a none em um elemento normal, mas se comporta de forma diferente na resolução de conflitos de bordas em tabelas: uma borda hidden sempre vence e suprime a borda da célula vizinha.

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

Experimente Você Mesmo »

O valor `inset`

inset é um estilo 3D que faz a caixa parecer pressionada para dentro da página. O sombreamento é derivado da cor da borda, por isso é mais visível com uma borda mais larga.

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

Experimente Você Mesmo »

O valor `outset`

outset é o oposto de inset: faz a caixa parecer elevada para fora da página. Juntos, inset, outset, groove e ridge são os quatro estilos de borda 3D, e todos os quatro dependem da cor da borda para criar seu efeito de sombreamento.

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

Experimente Você Mesmo »

Quando usar cada valor

solid — a escolha padrão para a maioria dos elementos de interface (cards, inputs, divisores).
dashed e dotted — úteis para divisores secundários, alvos de arrastar e soltar, ou qualquer coisa que precise de um peso visual mais leve que uma linha sólida.
double — ocasionalmente usado para títulos decorativos; é necessário pelo menos 3px de largura para ver as duas linhas e o espaço entre elas.
groove / ridge — efeitos 3D clássicos; raramente usados em interfaces modernas e planas, mas ainda válidos.
inset / outset — podem simular efeitos de pressão de botão; considere um box-shadow para um controle mais refinado.
hidden — é principalmente uma ferramenta para layout de tabelas; evite em elementos que não sejam tabelas, onde none é mais claro.

Armadilhas comuns

Um estilo de borda sozinho não renderiza nada se border-bottom-width for 0 ou border-bottom-color for transparent. Sempre verifique se as três sub-propriedades de borda estão definidas.
Substituir o atalho border-bottom depois de border-bottom-style redefine o estilo de volta para none. A ordem das declarações importa.
O valor double exige pelo menos 3px de largura para renderizar duas linhas distintas.
Os quatro valores 3D (groove, ridge, inset, outset) parecem idênticos a ridge/groove em alguns navegadores quando a cor da borda é currentColor em um fundo escuro — sempre teste com uma cor explícita.

Propriedades relacionadas

border-bottom — atalho para a largura, estilo e cor da borda inferior.
border-bottom-width — define a espessura da borda inferior.
border-bottom-color — define a cor da borda inferior.
border-style — define o estilo de linha dos quatro lados de uma vez.
border-top-style — a propriedade equivalente para a borda superior.
border-left-style — a propriedade equivalente para a borda esquerda.
border-right-style — a propriedade equivalente para a borda direita.

Prática

Quais dos seguintes são valores válidos para a propriedade border-bottom-style em CSS?

Sintaxe

Valores

Exemplos

Bordas sólidas e tracejadas

Bordas dupla, tracejada e em sulco

O valor hidden

O valor inset

O valor outset

Quando usar cada valor

Armadilhas comuns

Propriedades relacionadas

Prática

O valor `hidden`

O valor `inset`

O valor `outset`