Aula 9 — Bordas

As bordas são um dos recursos mais importantes do CSS para organizar o visual, delimitar áreas e criar interfaces claras.

Apesar de parecerem simples, elas têm impacto direto na usabilidade, hierarquia visual e acessibilidade.

O que são bordas no CSS?

Bordas envolvem o conteúdo e o padding de um elemento, fazendo parte do Box Model.

Elas ajudam a:

• Separar elementos visualmente
• Criar cards, caixas e botões
• Indicar foco ou estado ativo

A propriedade border

A forma mais comum de criar uma borda é usando a propriedade abreviada border.

 .caixa { border: 1px solid #ccc; } 

Essa linha define três coisas ao mesmo tempo:

• Espessura
• Estilo
• Cor

Espessura da borda — border-width

A espessura define o quão grossa será a borda.

 .caixa { border-width: 2px; border-style: solid; border-color: #428bca; } 

Valores comuns:

• 1px — padrão e discreto
• 2px ou mais — destaque visual

Estilos de borda — border-style

O CSS oferece vários estilos de borda.

 .caixa { border-style: dashed; } 

Estilos mais usados:

• solid — linha contínua (mais comum)
• dashed — tracejada
• dotted — pontilhada
• none — sem borda

DIV abaixo seguindo as seguinter regras CSS: { border-width: 2px; border-style: solid; border-color: #428bca; }

DIV abaixo seguindo as seguinter regras CSS: { border-width: 6px; border-style: dotted; border-color: red; }

Cor da borda — border-color

A cor da borda pode ser definida separadamente.

 .caixa { border-color: #999; } 

Ela aceita qualquer formato de cor do CSS: HEX, RGB, RGBA ou HSL.

Bordas individuais

Também é possível definir bordas apenas em lados específicos. No exemplo abaixo, apenas a borda inferior (border-bottom) será construída.

 .card { border-bottom: 2px solid #428bca; } 

Propriedades disponíveis:

• border-top
• border-right
• border-bottom
• border-left

Cantos arredondados — border-radius

O border-radius controla o arredondamento dos cantos.

 .card { border-radius: 8px; } 

Quanto maior o valor, mais arredondado o canto.

Bordas circulares

Com border-radius: 50%, é possível criar círculos.

 .avatar { width: 100px; height: 100px; border-radius: 50%; } 

Muito usado em avatares e ícones.

Borda × contorno — border vs outline

O outline é parecido com a borda, mas com diferenças importantes.

• border ocupa espaço no Box Model
• outline não ocupa espaço

 input:focus { outline: 2px solid #428bca; } 

Bordas e acessibilidade

Bordas ajudam usuários a identificar:

• Campos de formulário
• Estados de foco
• Áreas clicáveis

Boas práticas com bordas

• Use bordas com moderação
• Prefira cores neutras
• Padronize espessuras
• Combine bordas com espaçamento

Bordas como delimitadores visuais

Em interfaces reais, bordas raramente existem sozinhas. Elas ajudam o usuário a entender:

• Onde um componente começa
• Onde ele termina
• Se algo é clicável

Cards com bordas discretas

Cards são um dos componentes mais comuns da web moderna.

 
<div class="card"> 
  <h3>Título</h3> 
  <p>Conteúdo do card</p> 
</div> 

 .card { padding: 16px; border: 1px solid #ddd; border-radius: 8px; background-color: #fff; } 

Esse padrão é simples, limpo e muito usado.

O código acima resultará criará o seguinte bloco:

Inputs e formulários

Campos de formulário dependem fortemente de bordas para serem compreendidos.

 input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; } 

A borda indica claramente onde o usuário pode interagir.

Estados de foco em inputs

Quando um campo recebe foco, o usuário precisa perceber isso.

 input:focus { border-color: #428bca; outline: none; } 

Botões com borda

Nem todo botão precisa de fundo sólido.

 .btn-outline { padding: 10px 16px; border: 2px solid #428bca; background-color: transparent; color: #428bca; border-radius: 6px; } 

Esse estilo é comum em ações secundárias.

Bordas como separadores de seção

Bordas também podem substituir linhas ou divisores.

 .section { padding: 24px 0; border-bottom: 1px solid #e5e5e5; } 

Muito usado em listas, áreas administrativas e dashboards.

Listas com bordas

Bordas ajudam a organizar listas de itens.

 .lista-item { padding: 12px; border-bottom: 1px solid #ddd; } 

O último item pode remover a borda para melhor acabamento.

Bordas + hover (feedback visual)

Bordas também funcionam muito bem como feedback de interação.

 .card:hover { border-color: #428bca; } 

Bordas e hierarquia visual

Nem todas as bordas precisam ser iguais.

• Bordas mais claras → áreas secundárias
• Bordas mais fortes → destaque
• Bordas parciais → separação sutil

Erro comum: borda em tudo

Adicionar borda em todos os elementos cria ruído visual.

Combine bordas com:

• Espaçamento
• Cores
• Tipografia

Na próxima aula, vamos trabalhar com backgrounds e imagens — cores, imagens de fundo e gradientes 🌄🎨