EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Bordas e Border Radius CSS

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

Propriedade Border

Três Elementos de uma Borda

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

Exemplo

HTML 
<style>
.box {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* Abreviação */
.box {
  border: 2px solid #333;
  padding: 16px;
  background: #f9f9f9;
}
</style>
<div class="box">Borda sólida de 2px envolvendo a caixa</div>
▶ Experimente

Valores de Estilo de Borda

Exemplo

HTML 
<style>
.solid { border-style: solid; }
.dotted { border-style: dotted; }
.dashed { border-style: dashed; }
.double { border-style: double; }
</style>
<div class="solid">Borda sólida</div>
<div class="dotted">Borda pontilhada</div>
<div class="dashed">Borda tracejada</div>
<div class="double">Borda dupla</div>
▶ Experimente

Border Radius

border-radius arredonda os cantos dos elementos:

Exemplo

HTML 
<style>
.rounded {
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 16px;
  background: #f5f5f5;
}
.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: #3498db;
}
</style>
<div class="rounded">Cantos arredondados</div>
<div class="circle">Círculo</div>
▶ Experimente

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>

❓ Perguntas Frequentes

Q 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.
Q 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.
Q 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

📝 Exercícios

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