Gerador de border radius
Quatro controles deslizantes para os clássicos cantos arredondados, ou o modo orgânico de 8 valores para formas “blob”. Visualização instantânea e código CSS pronto para copiar.
Raios horizontais (antes da / barra):
Raios verticais (depois da / barra):
A sintaxe de raio duplo (com a barra)
Cada canto de border-radius é, na verdade, um quarto de elipse, definido por um
raio horizontal e um vertical. Quando você escreve border-radius: 60% 40% 30% 70% / 60%
30% 70% 40%, os quatro valores antes da barra definem os raios horizontais dos cantos
(no sentido horário a partir do superior esquerdo) e os que vêm depois da barra definem os raios verticais. Quando os dois
raios de um canto são diferentes, a curva fica assimétrica: é exatamente assim que nascem
as formas orgânicas.
Onde as formas blob brilham
As formas orgânicas funcionam muito bem como moldura para fotos de perfil, fundos decorativos em
seções hero e botões com um ar descontraído. Usar porcentagens em vez de pixels permite que a forma
se adapte a qualquer tamanho de elemento; você pode até animar a passagem de um blob para outro com uma simples
transition: border-radius .4s para um efeito de gelatina ao passar o mouse.