Propriedade CSS border-bottom-width
Use a propriedade border-bottom-width para definir a largura da borda inferior de um elemento. Veja como usar os valores desta propriedade CSS.
A propriedade border-bottom-width define a largura (espessura) da borda inferior de um elemento. Ela controla apenas a borda inferior — para estilizar os quatro lados de uma vez, use o atalho border-width.
Esta página explica quais valores border-bottom-width aceita, por que é necessário um estilo de borda para que ela seja exibida, a diferença entre as palavras-chave thin/medium/thick e comprimentos explícitos, e como ela se relaciona com as outras propriedades de largura por lado.
Por que a largura muitas vezes não mostra nada
Para ver o efeito de border-bottom-width, você também deve definir um estilo de borda com a propriedade border-style ou border-bottom-style. O estilo de borda inicial é none, e uma borda com estilo none nunca é renderizada, independentemente da largura configurada — portanto, a largura não tem efeito visível por si só.
/* Invisible: no style set */
.box { border-bottom-width: 10px; }
/* Visible: width + style together */
.box { border-bottom-width: 10px; border-bottom-style: solid; }Valores aceitos
Você pode definir a largura de duas formas:
- Comprimento — qualquer comprimento CSS como
4px,0.25emou0.1rem. Esta é a opção mais previsível, pois o resultado é exatamente o que você especifica. Comprimentos negativos não são permitidos e são tratados como inválidos. - Palavras-chave —
thin,mediumouthick. A especificação não define uma espessura exata em pixels para cada palavra-chave; o resultado preciso depende da implementação. As palavras-chave sempre seguem o padrãothin≤medium≤thick, e uma determinada palavra-chave permanece constante dentro de um único documento. Na maioria dos navegadores, elas correspondem a aproximadamente1px,3pxe5px.
Se você precisa que a largura seja consistente entre navegadores, prefira um comprimento explícito em vez das palavras-chave.
| Valor Inicial | medium |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. A largura pode ser animada. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderBottomWidth = "5px"; |
Sintaxe
Sintaxe da Propriedade CSS border-bottom-width
border-bottom-width: medium | thin | thick | length | initial | inherit;Exemplo da propriedade border-bottom-width:
Exemplo da Propriedade CSS border-bottom-width com o valor thick
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-bottom-width: thick;
}
</style>
</head>
<body>
<p>
As you can see, we used border-bottom-width property to set the width of bottom border of this element.
</p>
</body>
</html>Resultado
Exemplo da propriedade border-bottom-width com o valor "medium":
Exemplo da Propriedade CSS border-bottom-width com o valor medium
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
border-bottom-style: groove;
border-bottom-width: medium;
}
div {
border-style: groove;
border-bottom-width: medium;
}
</style>
</head>
<body>
<h2>A heading with a medium bottom border.</h2>
<div>A div element with a medium bottom border.</div>
</body>
</html>Exemplo da propriedade border-bottom-width que mostra a diferença entre os valores "thin" e "thick":
Exemplo da Propriedade CSS border-bottom-width com o valor thin
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
padding: 5px;
border-bottom-style: ridge;
border-bottom-width: thin;
border-color: #cccccc;
}
div {
padding: 5px;
border-style: ridge;
border-bottom-width: thick;
}
</style>
</head>
<body>
<h2>A heading with thin bottom border</h2>
<div>A div element with thick bottom border.</div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| medium | Define uma borda inferior média. É o valor padrão. | Experimente » |
| thin | Define uma borda inferior fina. | Experimente » |
| thick | Define uma borda inferior espessa. | Experimente » |
| length | Define a largura da borda inferior com um valor de comprimento específico. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda o valor da propriedade do elemento pai. |
Propriedades relacionadas
border-bottom-width é uma das quatro propriedades de largura por lado. Use a correspondente para cada borda, ou o atalho quando quiser definir várias de uma vez:
- border-top-width, border-right-width, border-left-width — as outras três bordas individuais.
- border-width — atalho que define as quatro larguras em uma única declaração.
- border-bottom-style e border-bottom-color — o estilo e a cor da mesma borda inferior.
- border-bottom — atalho para a largura, o estilo e a cor da borda inferior juntos.