Gerador de Border-Radius CSS
Crie visualmente border-radius CSS com pré-visualização em direto e copie código pronto para produção.
border-radius: —;
100% privado — tudo é executado no seu navegador. Nada é enviado.
Sobre Gerador de Border-Radius CSS
O Gerador de Border Radius CSS cria desde cartões suavemente arredondados até formas orgânicas de blob. Arraste as alças dos cantos diretamente na pré-visualização, ou defina cada canto numericamente — incluindo a sintaxe completa de oito valores, em que cada canto tem raios horizontal e vertical separados. Esse segundo eixo é o que desbloqueia ovos, folhas, gotas e blobs.
Um alternador de vínculo dos cantos mantém os quatro cantos sincronizados para o arredondamento uniforme clássico, enquanto desvinculá-los libera cada canto para formas assimétricas. Doze predefinições — rounded, pill, circle, squircle, dois blobs, leaf, egg, arch, teardrop, petal e wave — demonstram o que a propriedade pode fazer, e um botão de aleatorização gera formas orgânicas novas indefinidamente.
Você pode mudar a unidade, recolorir o elemento e a tela para combinar com seu design, e copiar o valor puro de border-radius ou uma regra CSS completa. A ferramenta é 100% do lado do cliente — nada é enviado.
Como usar Gerador de Border-Radius CSS
- Arraste as alças dos cantos na pré-visualização, ou desative "Vincular todos os cantos" para editar cada canto separadamente.
- Defina o raio horizontal e vertical por canto para formas orgânicas semelhantes a blobs.
- Escolha sua unidade e ajuste as cores do elemento e do fundo para pré-visualizar em contexto.
- Experimente as predefinições — pill, squircle, blob, leaf, teardrop e outras — ou clique em aleatorizar.
- Copie o valor de border-radius ou o CSS completo.