Propriedade Border (Shorthand)
Última atualização: 2026-09-13
border Propriedade Border (Shorthand)
A propriedade border (shorthand) é uma das mais usadas no CSS, permitindo definir a largura, o estilo e a cor da borda de um elemento em uma única declaração. A borda envolve o conteúdo do elemento, logo dentro do padding, e é uma parte chave do modelo de caixa. Com border você pode dar rapidamente um contorno visível a qualquer elemento.
| Categoria | |
|---|---|
| Valor Inicial | medium none currentcolor |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | shadow |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
border: <border-width> || <border-style> || <color>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<border-width> || <border-style> || <color> | Valor | Atalho para largura, estilo e cor da borda. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： O atalho border define os quatro lados de uma vez. Para estilizar um único lado, use border-top, border-right, border-bottom ou border-left.
Aviso： O atalho border redefine qualquer border-width, border-style ou border-color definidos anteriormente. Se você só precisa mudar um deles, prefira a propriedade completa correspondente.
❓ Perguntas Frequentes
QQual é a diferença entre border e outline?
Aborder faz parte do modelo de caixa e é desenhada ao redor do conteúdo e do padding, então ocupa espaço e afeta o tamanho e o layout do elemento. outline é desenhado fora da borda, não ocupa espaço e não afeta o layout, o que a torna ideal para indicadores de foco do teclado. Use border para bordas decorativas e outline para dicas visuais sem espaço, especialmente para estados de foco.
QPor que não consigo ver uma borda após defini-la?
AA causa mais comum é esquecer de definir border-style. Seu valor padrão é none, então você deve especificar um estilo explicitamente (como solid ou dashed) para a borda aparecer. Verifique também se border-width não é 0 e se nenhuma outra regra sobrescreve a cor. A correção mais simples é usar o atalho border para definir os três de uma vez.
QA ordem dos três valores no atalho border importa?
ANão há exigência estrita — os navegadores identificam os valores pelo tipo automaticamente — mas a ordem convencional é largura, depois estilo, depois cor, por exemplo border: 1px solid #ccc;. Observe que omitir o estilo assume none (sem borda visível), e omitir a cor assume currentcolor (a cor do texto). Manter uma ordem consistente também torna o código mais fácil de manter.
QComo defino bordas diferentes nos quatro lados?
AUse os atalhos por lado border-top, border-right, border-bottom e border-left, ou defina a borda inteira primeiro e então sobrescreva os lados individuais. Por exemplo, border: 1px solid #ddd; border-bottom: 3px solid #e74c3c; produz uma borda inferior destacada com borda comum nos outros três lados.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
