Propriedade de Estilo da Borda
Última atualização: 2026-09-13
border-style Propriedade de Estilo da Borda
A propriedade border-style define a aparência da linha da borda, como solid, dashed ou dotted. É a chave para que uma borda seja visível — mesmo com border-width e border-color definidos, a borda permanece invisível quando border-style é none. O CSS oferece 10 estilos de linha diferentes para escolher.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset{1,4};⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | Palavra-chave | Os 10 estilos de linha 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-style | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： solid é o estilo mais usado; dashed e dotted são frequentemente usados para marcadores temporários ou estados de rascunho.
Aviso： none e hidden não renderizam borda, mas hidden também suprime bordas vizinhas em uma tabela com border-collapse: collapse, então seus comportamentos diferem.
❓ Perguntas Frequentes
QPor que groove, ridge, inset e outset parecem chatos?
AEsses quatro estilos 3D dependem do contraste claro/escuro da cor da borda para criar profundidade, então o efeito é quase invisível quando o contraste de cor é baixo ou a borda é fina. Raramente são usados em UIs modernas planas; prefira solid combinado com box-shadow para um visual em camadas sutil.
QQual é a diferença entre border-style: none e hidden?
AAmbos não renderizam borda. A diferença importa em tabelas: com border-collapse: collapse, hidden suprime forcefulmente as bordas vizinhas (prioridade máxima), enquanto none tem prioridade menor e a borda de uma célula vizinha ainda pode aparecer. Em elementos comuns os dois se comportam de forma idêntica.
QQuais estilos de linha de borda o CSS oferece e quando devo usar cada um?
AO CSS oferece 10 estilos: none, hidden, solid, dashed, dotted, double, groove, ridge, inset e outset. solid é o mais comum; dashed e dotted funcionam bem como separadores; double dá ênfase; e os quatro estilos 3D raramente são usados em design plano. Escolha com base no peso visual necessário.
QComo criar estilos mistos como uma borda tracejada em apenas um lado?
AA propriedade border-style aceita de 1 a 4 valores atribuídos às bordas superior, direita, inferior e esquerda; assim, border-style: solid dashed; resulta em superior/inferior sólidas e esquerda/direita tracejadas. Você também pode combinar propriedades por lado, por exemplo border-top-style: dashed; border-bottom-style: solid; para obter apenas uma borda tracejada.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
