Gerador de border-radius CSS

Ajuste independentemente os quatro cantos de um elemento e obtenha instantaneamente o valor CSS border-radius correspondente, com pré-visualização ao vivo.

Exemplo:

Como funciona

A propriedade CSS border-radius pode receber até quatro valores, um por canto, na ordem superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo. Esta ferramenta permite ajustar cada canto independentemente e visualizar o resultado antes de copiar o código.

Como criar uma forma perfeitamente redonda ou oval?

Ajuste os quatro cantos com a unidade "%" para um valor de 50%: aplicado a um elemento quadrado, isso produz um círculo perfeito; aplicado a um retângulo, uma elipse.

Por que usar valores diferentes conforme os cantos?

Cantos assimétricos permitem criar formas orgânicas ou efeitos de "gota d'água", geralmente usados para bolhas de notificação ou elementos decorativos.

Processamento 100% local: o cálculo ocorre inteiramente no seu navegador via WebAssembly, sem qualquer envio de dados a um servidor.