English 中文 العربية 日本語 Português

CSS: 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

1. Propriedade Border

(1) 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

(2) 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

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

(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>

❓ 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

📝 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.
Web-Tutorial.com

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.

100%