Carregando...

Bordas CSS

Você já pinta preenchimentos, fotos, gradientes e fades suaves. Próxima habilidade: desenhar a borda da caixa. Uma borda (border) é a linha que emoldura o elemento — cards, botões, campos e painéis dependem dela.

O que é uma borda?

Uma borda CSS fica na borda da caixa do elemento. Tem três ingredientes: largura (espessura), estilo (aparência — sólido, tracejado etc.) e cor. Sem estilo, muitas vezes não há linha útil mesmo com largura.

As três partes

Pense em cada borda como uma receita curta: espessura + visual + tinta.

Forma longa: largura, estilo, cor

css
CSS Code 
.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Por que o estilo importa

Só border-width não basta. Sem border-style diferente do inicial none, em geral você não vê linha. Comece com solid até precisar de algo mais.

Atalho: uma linha em vez de três

O atalho border junta largura, estilo e cor. Ordem cotidiana comum: largura → estilo → cor.

Atalho border

css
CSS Code 
.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}

Estilos de borda comuns

O estilo é a personalidade da linha. Memorize primeiro um conjunto diário pequeno.

📊 Valores comuns de border-style

Palavra Aparência Uso diário
solid Linha contínua Cards, botões, campos
dashed Traços curtos Marcadores, zonas de soltar
dotted Pontos Separadores suaves, molduras discretas
double Duas linhas paralelas Ênfase decorativa (com moderação)
none Nenhuma borda desenhada Reset / remover a borda
hidden Como none no colapso de bordas de tabela Tabelas depois — saiba o nome

Vários estilos lado a lado

Mesma largura e cor; só o estilo muda.

solid, dashed, dotted, double

css
CSS Code 
.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }

Um lado de cada vez

Você pode estilizar topo, direita, baixo e esquerda separadamente — útil para sublinhados, barra de destaque à esquerda ou cards assimétricos.

Bordas por lado

css
CSS Code 
.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}

Atalho por lado

border-left: 4px solid #0f766e é o jeito cotidiano de definir uma borda sem tocar nas outras.

Hábito de card cotidiano

Uma borda leve com padding e preenchimento suave lê como card claro sem gritar.

Card com borda simples

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* arredondamento é a próxima lição — cantos retos aqui */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}

Remover uma borda

Para limpar, prefira border: none (ou border-style: none). Só border-color: transparent às vezes ainda deixa espessura — none é o reset limpo.

Reset com border none

css
CSS Code 
.plain {
border: none;
}

Experimente você

  1. Card com border-width, border-style: solid e border-color verde-azulado.
  2. Reescreva o mesmo visual com border: 2px solid #0f766e.
  3. Quatro caixas: solid, dashed, dotted e double com a mesma espessura.
  4. Citação só com borda esquerda grossa.
  5. Comece num botão com borda e remova com border: none.

Erros comuns

  • Definir largura e cor e esquecer border-style (nada aparece)
  • Misturar border (borda desenhada) com margin (espaço externo) — ferramentas diferentes
  • Esperar cantos arredondados só de border — isso é border-radius (próxima lição)
  • Colorir cada lado de forma gritante “só porque sim”
  • Deixar borda grossa transparente quando queria border: none

Resumo

  • Uma borda precisa de largura, estilo e cor
  • border: 2px solid #0f766e é o atalho cotidiano
  • Aprenda primeiro solid, dashed, dotted, double e none
  • Estilize lados separadamente quando o design pedir
  • Reset limpo com border: none
  • Cantos retos por enquanto — arredondamento vem a seguir

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
9
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial