Gerador de Border Radius
Ajuste os 4 cantos individualmente e veja formas orgânicas em tempo real.
Propriedades CSS utilizadas
border-radius / border-*-radiusDefine a curvatura de cada canto do elemento. Quando os quatro valores são iguais, o resultado é simétrico; valores diferentes criam formas orgânicas e blobs.
Valores em porcentagemUsar % em vez de px faz o raio se adaptar ao tamanho do elemento — útil para criar círculos perfeitos com border-radius: 50%.
Perguntas frequentes
Defina width e height iguais e aplique border-radius: 50% nos quatro cantos.
Sim. Aplique a propriedade diretamente na tag ou em um container com overflow: hidden.
Sim, ele é uma propriedade animável — combine com a nossa ferramenta de Transitions para suavizar a mudança de forma.
Ferramentas relacionadas
Gerador de Box Shadow
Combine múltiplas camadas de sombra para profundidade realista, inclusive sombras internas.
Gerador de Neumorphism
Superfícies suaves com sombras duplas — o mesmo estilo usado neste site.
Gerador de Cards
Cards com sombra, borda, raio e espaçamento configuráveis para listagens e dashboards.