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; }

Exemplo de DIV com borda

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

Exemplo de DIV com borda
Na prática profissional, solid é o padrão mais usado.

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
Bordas parciais são ótimas para separar seções.

Cantos arredondados — border-radius

O border-radius controla o arredondamento dos cantos.

 .card { border-radius: 8px; } 
Exemplo de DIV com borda

Quanto maior o valor, mais arredondado o canto.

Interfaces modernas usam cantos levemente arredondados.

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.

Exemplo de DIV com borda

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; } 
Nunca remova o outline sem oferecer alternativa acessível.

Bordas e acessibilidade

Bordas ajudam usuários a identificar:

  • Campos de formulário
  • Estados de foco
  • Áreas clicáveis
Um bom contraste de borda melhora a usabilidade.

Boas práticas com bordas

  • Use bordas com moderação
  • Prefira cores neutras
  • Padronize espessuras
  • Combine bordas com espaçamento
Bordas demais poluem o layout.

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
Bordas comunicam estrutura.

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:

Exemplo de página HTML

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; } 
Se remover o outline, ofereça um foco visual claro com borda.

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; } 
Exemplo de página HTML

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; } 
Pequenas mudanças comunicam interação sem exagero.

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
Hierarquia visual guia o olhar do usuário.

Erro comum: borda em tudo

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

Se tudo tem borda, nada se destaca.

Combine bordas com:

  • Espaçamento
  • Cores
  • Tipografia

💾🧠 Resumo da aula para nunca mais esquecer

  • Bordas fazem parte do Box Model
  • border define espessura, estilo e cor
  • border-radius cria cantos arredondados
  • Bordas podem ser aplicadas por lado
  • outline é importante para acessibilidade
  • Bordas são ferramentas de organização visual
  • Cards, inputs e botões usam bordas constantemente
  • Bordas ajudam a indicar foco e interação
  • Separadores podem ser feitos com bordas
  • Moderação cria interfaces mais elegantes

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


HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.


Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras


O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!


Nos primeiros oito dias após o lançamento do console Nintendo Wii foram vendidas 600 mil unidades. Isso equivale a quase um por segundo e estes incríveis números são referentes às vendas apenas nos EUA!


A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.