Carregando...

Border-radius CSS

Você já desenha uma borda nítida em volta de uma caixa. Muitas vezes o design quer cantos mais suaves — cards amigáveis, botões modernos, avatares que se leem como círculos. Isso é border-radius: quanto cada canto curva.

O que faz border-radius?

border-radius arredonda os cantos da caixa de borda. A curva vale para a linha da borda e o fundo (e costuma recortar imagem/overflow). Um comprimento maior significa canto mais redondo. Unidades comuns: px ou %.

Um valor — os quatro cantos

O começo cotidiano: um comprimento para cada canto.

Mesmo raio em todos os cantos

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}

O que você deve notar

A borda segue a curva e o preenchimento branco fica dentro da forma arredondada. O raio não é uma segunda borda — ele molda a caixa existente.

Atalho: quantos valores?

Você pode passar um, dois, três ou quatro comprimentos. A ordem dos cantos é fixa.

📊 Contagem de valores de border-radius

Valores Significado Nota diária
1 Os quatro cantos iguais Cards e painéis suaves
2 Cima-esquerda + baixo-direita, depois cima-direita + baixo-esquerda Pares diagonais
3 Cima-esquerda, cima-direita + baixo-esquerda, baixo-direita Menos comum — saiba que existe
4 Cima-esquerda, cima-direita, baixo-direita, baixo-esquerda Controle total, horário a partir de cima-esquerda

Quatro cantos, quatro números

Quando cada canto precisa da própria curva, liste quatro valores no sentido horário a partir de cima-esquerda.

Quatro cantos diferentes

css
CSS Code 
.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

Dois valores — pares diagonais

Dois comprimentos emparelham cantos opostos: o primeiro é cima-esquerda e baixo-direita; o segundo, cima-direita e baixo-esquerda.

Raio de dois valores na diagonal

css
CSS Code 
.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}

Botões cápsula

Um raio grande (muitas vezes metade da altura, ou um valor grande como 999px) transforma um retângulo em cápsula — comum em chips e ações principais.

Botão em forma de cápsula

css
CSS Code 
.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}

Avatares circulares

Para um círculo verdadeiro, dê à caixa largura e altura iguais, depois border-radius: 50%. Em uma caixa não quadrada, 50% faz uma elipse.

Círculo com raio de 50 por cento

css
CSS Code 
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* recorta uma foto dentro do círculo */
}

Experimente você

  1. Suavize um card com borda usando border-radius: 12px.
  2. Estilize um badge com quatro raios de canto diferentes.
  3. Use um raio de dois valores em um tile e note o emparelhamento diagonal.
  4. Monte um botão cápsula com border-radius: 999px.
  5. Faça um avatar 64×64 com border-radius: 50% — depois teste 50% num retângulo largo e compare.

Erros comuns

  • Colocar um raio enorme numa caixa vazia sem borda/cor e estranhar por que «nada aparece»
  • Usar 50% num retângulo largo e esperar um círculo perfeito (você obtém uma elipse)
  • Esquecer largura e altura iguais quando quer um círculo
  • Achar que border-radius substitui border — ainda precisa de borda ou preenchimento para ver bem a curva
  • Misturar a ordem dos cantos (quatro valores: horário a partir de cima-esquerda)

Resumo

  • border-radius arredonda os cantos da caixa
  • Um valor suaviza todos; quatro valores controlam cada canto
  • Dois valores emparelham cantos opostos na diagonal
  • Raios grandes fazem cápsulas; 50% num quadrado faz um círculo
  • A curva recorta borda e fundo juntos
  • Pratique o card, a cápsula e o avatar até as formas parecerem óbvias

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial