CSS: Bordas e Border Radius CSS

Última atualização: 2026-10-13

Bordas e border-radius são propriedades importantes para dar "forma" aos elementos. Bordas adicionam linhas de contorno aos elementos, enquanto border-radius suaviza cantos afiados.

Referência Rápida de Propriedades de Borda

Propriedade	Valores Comuns	Finalidade
`border-width`	`1px`, `2px`, `medium`, `thick`	Largura da borda
`border-style`	`solid`, `dashed`, `dotted`, `double`, `none`	Estilo da borda
`border-color`	`#333`, `red`, `transparent`	Cor da borda
`border`	`2px solid #333`	Abreviação (largura+estilo+cor)
`border-top/right/bottom/left`	`1px dashed red`	Bordas de lado individual
`border-radius`	`4px`, `50%`, `10px 20px`	Raio do canto
`border-collapse`	`collapse`, `separate`	Modo de colapso de borda da tabela

Propriedades nesta seção: border-width border-style border-color border border-radius outline-offset

1. Propriedade Border

(1) Três Elementos de uma Borda

Cada borda tem três elementos: largura, estilo e cor.

▶ Exemplo

▶ Experimente

(2) Valores de Estilo de Borda

▶ Exemplo

▶ Experimente

2. Border Radius

border-radius arredonda os cantos dos elementos:

▶ Exemplo

▶ Experimente

(1) Usos Comuns

Avatar redondo:

HTML

<style>
.avatar {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
</style>
<div class="avatar">Avatar</div>

Botão cápsula:

HTML

<style>
.pill {
  border-radius: 999px;
  padding: 8px 24px;
  background: #3498db;
  color: white;
}
</style>
<div class="pill">Botão cápsula</div>

Propriedades nesta seção: border-width border-style border-color border border-radius outline-offset

❓ Perguntas Frequentes

P Qual é a diferença entre border-radius: 50% e 999px?

R 50% é relativo às dimensões do elemento — quadrado se torna círculo, retângulo se torna elipse. 999px é um valor fixo grande — desde que exceda metade das dimensões, todos os cantos se tornam formato "cápsula" completamente arredondado. Mesmo efeito para quadrados, diferente para retângulos.

P Outline e border podem ser usados juntos?

R Sim. outline não ocupa espaço (não afeta tamanho do elemento), border sim. outline é comumente usado com estado :focus para fornecer indicadores de foco para usuários de teclado. Use outline-offset para controlar distância entre outline e limite do elemento.

P Como definir raio para cantos individuais?

R Use border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius para cantos individuais. Ou abreviação: border-radius: top-left top-right bottom-right bottom-left;.

📖 Resumo

Bordas e border-radius são ferramentas fundamentais para dar "forma" aos elementos da página
border controla contornos do elemento, border-radius suaviza cantos afiados
Dominar combinações (como border-radius: 50% para avatares redondos, border: none para remover padrões) é muito prático no desenvolvimento real

📝 Exercícios

Crie um card com borda e border-radius para parecer um "cartão de visita" — com borda, cantos arredondados e preenchimento.
Use border-radius: 50% para criar uma moldura de avatar circular.
Use diferentes combinações de bordas para criar um item de menu com "sublinhado" (apenas borda inferior).
Experimente estilos de borda dashed e dotted para ver suas diferenças visuais.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós