Gerador de Border Radius CSS

border-radius além do círculo

Cada canto pode ter um raio diferente. Indo além, a sintaxe completa do border-radius aceita raios horizontais e verticais distintos (separados por /), o que permite criar formas orgânicas (os famosos "blobs") usadas em ilustrações e fundos modernos.

Com quatro valores, a ordem é sempre no sentido horário: superior esquerdo, superior direito, inferior direito e inferior esquerdo.

Como usar

1. Arraste os controles Sup. esq., Sup. dir., Inf. dir. e Inf. esq. (de 0 a 150 px) e acompanhe a prévia.
2. Marque Forma orgânica (raios diferentes H/V) para trabalhar em porcentagem (0 a 100%). Os controles passam a definir os raios horizontais, e a ferramenta acrescenta os verticais depois da barra.
3. Clique em Aleatório para sortear valores; na forma orgânica, ele sorteia também os raios verticais.
4. Copie o resultado do campo CSS com o botão copiar.

Exemplos

• Cantos iguais: border-radius: 20px 20px 20px 20px;, que equivale a border-radius: 20px;.
• Aba de navegador (só os cantos de cima arredondados): border-radius: 12px 12px 0px 0px;.
• Blob: border-radius: 30% 70% 70% 30% / 80% 20% 80% 20%;.

Dúvidas frequentes

Como faço um círculo perfeito?

Use border-radius:50% em um elemento quadrado (mesma largura e altura). Na prévia, que tem 200 × 200 px, 100 px em todos os cantos também forma um círculo.

Px ou porcentagem?

Px mantém a curva igual em qualquer tamanho de elemento. Porcentagem acompanha as dimensões, por isso é a escolha das formas orgânicas.