Propriedade CSS border-bottom
CSS border-bottom define largura, estilo e cor da borda inferior de um elemento em uma declaração. Sintaxe, valores e exemplos.
A propriedade border-bottom é um atalho CSS que define a largura, o estilo e a cor da borda inferior de um elemento em uma única declaração. Em vez de escrever três propriedades longas separadas, você as define todas de uma vez:
/* Longhand — three declarations */
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #1c87c9;
/* Shorthand — one declaration, same result */
border-bottom: 3px solid #1c87c9;Esta página abrange a sintaxe, os valores aceitos, exemplos práticos e o erro mais comum (um estilo ausente) para que sua borda realmente apareça.
Como os valores se comportam
Você pode listar os três valores em qualquer ordem, mas a ordem recomendada é largura, estilo, cor. Qualquer valor omitido volta ao seu padrão:
- Largura omitida → padrão
medium(aproximadamente 3px na maioria dos navegadores). - Cor omitida → padrão
currentColor, ou seja, a cor do texto do elemento. - Estilo omitido → padrão
none, o que significa que a borda não será renderizada.
Esse último ponto é a principal razão pela qual um border-bottom "não funciona": sem um border-style, o navegador não desenha nada, independentemente da largura ou cor definida.
/* Renders nothing — no style given */
.no-border { border-bottom: 5px #1c87c9; }
/* Renders a 5px blue solid line */
.works { border-bottom: 5px solid #1c87c9; }Quando usar border-bottom
Use border-bottom quando quiser uma linha em apenas um lado de um elemento, em vez de uma borda completa. Casos comuns:
- Títulos sublinhados ou divisores de seção — uma linha mais espessa e colorida sob um
<h2>. - Indicadores de abas/navegação — destacar o link ativo com uma borda inferior.
- Campos de entrada — o visual "Material Design" usa apenas uma borda inferior em vez de uma caixa completa.
Se precisar da mesma borda nos quatro lados, use o atalho border. Para os outros lados individuais, consulte border-top, border-left e border-right.
| Valor Inicial | medium none currentColor |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Sim. A cor e a largura do border-bottom são animáveis. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderBottom = "15px dotted blue"; |
Sintaxe
Sintaxe da Propriedade CSS border-bottom
border-bottom: border-width | border-style | border-color | initial | inherit;Exemplo da propriedade border-bottom:
Exemplo da Propriedade CSS border-bottom com o valor groove
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>A heading with a groove blue bottom border.</h2>
</body>
</html>Resultado
Exemplo de uso da propriedade border-bottom com elementos <h2>, <p> e <div>:
Exemplo da Propriedade CSS border-bottom com os valores dashed, double e ridge
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 5px dashed #1c87c9;
}
p {
border-bottom: 8px double #8ebf42;
}
div {
border-bottom: 10px ridge #ccc;
}
</style>
</head>
<body>
<h2>A heading with a dashed blue bottom border.</h2>
<p>A paragraph with a double green bottom border.</p>
<div>A div element with a ridge gray bottom border.</div>
</body>
</html>Resultado
Valores
| Valor | Descrição |
|---|---|
| border-bottom-style | Define o estilo da borda inferior. O valor padrão é "none". |
| border-bottom-width | Define a largura da borda inferior. O valor padrão é "medium". |
| border-bottom-color | Define a cor da borda inferior. O valor padrão é a cor do texto. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
border— o atalho para todos os lados.border-top,border-left,border-right— os atalhos para os outros lados individuais.border-bottom-width,border-bottom-style,border-bottom-color— as três propriedades longas queborder-bottomexpande.border-style,border-width,border-color— controlam os quatro lados de uma vez por aspecto.