Como faço um círculo?

Use border-radius: 50% em um elemento com largura e altura iguais. Em um retângulo, 50% gera uma elipse, enquanto um valor grande em pixels gera uma pílula com laterais retas.

O que significa a barra em border-radius?

Ela separa os raios horizontais dos verticais, para que cada canto seja um quarto de elipse em vez de um quarto de círculo. As formas orgânicas usam essa sintaxe.

Gerador de Border Radius

Arredonde cada canto, alterne para raios elípticos e arraste as alças das bordas para esculpir formas orgânicas. Copie o CSS de border-radius ou a classe Tailwind.

Prévia em tempo real

Mude para % para esculpir a forma com as alças das bordas.

border-radius: 24px;

Tudo permanece no seu navegador.

Referências de formatos

MDN — border-radius

Página da ferramenta atualizada: 2026-10-25

Prévia em tempo real

Guia e exemplo

Ferramentas relacionadas

Referências de formatos