Propriedade CSS border-width
CSS border-width é uma propriedade abreviada que define a largura das quatro bordas de um elemento. Veja exemplos e experimente você mesmo.
A propriedade CSS border-width define a largura (espessura) da borda de um elemento. É uma abreviação que se aplica aos quatro lados ao mesmo tempo, e representa o componente de largura da propriedade abreviada mais ampla border.
Você pode definir cada lado de forma independente com as propriedades longas:
- border-top-width define a largura da borda superior.
- border-right-width define a largura da borda direita.
- border-bottom-width define a largura da borda inferior.
- border-left-width define a largura da borda esquerda.
Uma borda só é exibida quando border-style tem um valor diferente do padrão none. Se você definir border-width sem um estilo de borda, a borda permanece invisível — este é o motivo mais comum para uma borda "não funcionar."
Como a abreviação mapeia valores para os lados
border-width aceita de um a quatro valores, e o número de valores fornecidos determina a quais lados eles se aplicam:
| Valores fornecidos | Superior | Direita | Inferior | Esquerda |
|---|---|---|---|---|
border-width: a | a | a | a | a |
border-width: a b | a | b | a | b |
border-width: a b c | a | b | c | b |
border-width: a b c d | a | b | c | d |
A forma com quatro valores segue a ordem horária superior → direita → inferior → esquerda usada por todas as abreviações de caixa CSS (a mesma ordem de margin e padding).
Cada valor é um <line-width>: um comprimento (px, em, rem, etc.) ou uma das palavras-chave thin, medium ou thick. Porcentagens não são permitidas.
| Valor inicial | medium |
|---|---|
| Herdado | Não |
| Animável | Sim. A largura da borda é animável. |
| Versão | CSS1 |
| Sintaxe JavaScript | object.style.borderWidth = "1px 5px"; |
Sintaxe
border-width: <line-width>{1,4} | initial | inherit;Um único valor (os quatro lados)
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px;
padding: 5px;
}
</style>
</head>
<body>
<p>This paragraph's border width is set to 1px.</p>
</body>
</html>Largura diferente por lado
Aqui, os três tamanhos de palavra-chave são comparados lado a lado, além de uma caixa com quatro valores onde cada borda recebe uma espessura diferente.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #666;
padding: 5px;
border-style: solid;
}
.thin {
border-width: 1px;
}
.medium {
border-width: medium;
}
.thick {
border-width: 10px;
}
.mixed {
/* top right bottom left */
border-width: 2px 8px 12px 24px;
}
</style>
</head>
<body>
<p class="thin">This paragraph's border width is set to 1px.</p>
<p class="medium">This paragraph's border width is set to medium.</p>
<p class="thick">This paragraph's border width is set to 10px.</p>
<p class="mixed">Each side has its own width: 2px 8px 12px 24px.</p>
</body>
</html>Resultado
Palavra-chave vs. comprimento: quando usar cada um
- Use um comprimento (
px,em,rem) quando precisar de uma espessura exata e previsível — este é o caso mais comum em layouts reais. - Use as palavras-chave
thin,mediumethickquando a contagem exata de pixels não importa e você está satisfeito em deixar o navegador decidir. Elas correspondem a valores de pixel pequenos definidos pelo navegador (aproximadamente 1px, 3px e 5px na maioria dos navegadores, mas a especificação não os fixa). mediumé o valor inicial, portanto um elemento comborder-style: solide semborder-widthjá exibe uma borda de largura média.
Valores negativos são inválidos e fazem toda a declaração ser ignorada.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| medium | Define uma borda média. Este é o valor padrão. (Palavra-chave relativa com valores de pixel definidos pelo navegador.) | Experimente » |
| thin | Define uma borda fina. | Experimente » |
| thick | Define uma borda grossa. | Experimente » |
| length | Define a espessura da borda. | Experimente » |
| initial | Define a propriedade para seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do seu elemento pai. |