Propriedade de Largura da Borda
Última atualização: 2026-09-13
border-width Propriedade de Largura da Borda
A propriedade border-width define a espessura da borda de um elemento. Você pode usar as palavras-chave predefinidas thin, medium e thick, ou valores de comprimento explícitos como px ou em. Usada sozinha, controla apenas a largura, deixando o estilo e a cor intocados.
| Categoria | |
|---|---|
| Valor Inicial | medium |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | length |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
border-width: thin | medium | thick | <length>{1,4};⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
thin | medium | thick | Palavra-chave | Palavras-chave predefinidas de largura da borda |
<length> | Tipo | Largura de borda explícita |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： A propriedade border-width aceita de 1 a 4 valores para as bordas superior, direita, inferior e esquerda, seguindo as mesmas regras de margin e padding.
❓ Perguntas Frequentes
QQuantos pixels têm thin, medium e thick?
AA especificação não define tamanhos exatos em pixels para essas palavras-chave — cada navegador as implementa de forma ligeiramente diferente. Na prática, medium é de cerca de 3–4px (e também é a largura padrão da borda), thin de cerca de 1px e thick de cerca de 5–6px. A renderização pode variar entre navegadores, então use um comprimento explícito como 2px quando precisar de controle preciso.
QPor que a borda não aparece mesmo eu tendo definido border-width?
APorque o valor padrão de border-style é none — sem um estilo, nenhuma borda é desenhada independentemente da largura. Você também precisa definir border-style (por exemplo, solid) e uma cor para que os três estejam presentes. Depure na ordem: primeiro confirme border-style, depois verifique se border-width não é 0 e, por fim, confirme a cor.
QO que significam de 1 a 4 valores de border-width?
AEles seguem exatamente as mesmas regras de margin e padding: um valor se aplica aos quatro lados; dois valores correspondem a superior/inferior e esquerda/direita; três valores correspondem a superior, esquerda/direita e inferior; quatro valores se aplicam no sentido horário a partir do topo (topo, direita, inferior, esquerda). Por exemplo, border-width: 2px 4px resulta em 2px em cima/baixo e 4px na esquerda/direita, ou use border-top-width e similares para um único lado.
Qborder-width suporta porcentagens?
ANão. A propriedade border-width aceita apenas as palavras-chave thin, medium, thick ou unidades de comprimento (px, em, rem, vw, calc() e assim por diante); valores em porcentagem são tratados como declarações inválidas e ignorados. Unidades relativas como em/rem se ajustam ao tamanho da fonte, o que convém a layouts responsivos; use px quando precisar de uma espessura fixa.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
