Gerador de Border Radius CSS

Arredondar os quatro cantos com um valor só, todo mundo sabe. O problema aparece quando você quer um blob orgânico, uma gota ou um card assimétrico: aí entra a sintaxe completa do border-radius, com até oito valores, que quase ninguém guarda de cabeça. Nesta página cada canto tem dois controles, raio horizontal e vertical, o preview reage na hora e o CSS sai pronto para copiar, com presets de quadrado, pílula, círculo e blob para começar.

A sintaxe estendida usa uma barra: os quatro valores antes dela são os raios horizontais e os quatro depois, os verticais, sempre na ordem superior esquerdo, superior direito, inferior direito, inferior esquerdo. Com porcentagem há uma pegadinha clássica: o raio horizontal é relativo à largura e o vertical à altura. Por isso 50% em tudo num retângulo vira elipse, não círculo. A ferramenta só emite a barra quando os dois lados diferem, mantendo o código curto.

Prefira porcentagem quando a forma deve escalar com o elemento, e px quando o raio precisa ser fixo, como nos cantos de um botão. Teste com a largura e a altura reais do seu componente, porque o mesmo conjunto de raios muda completamente de cara em outra proporção. Se valores altos pararem de fazer efeito, é o navegador reduzindo raios que somados excedem o lado do elemento. O código copiado inclui width e height do preview; apague essas linhas se não precisar delas.