Gerador de border-radius

Como usar o gerador de border-radius

1. Arrasta os pontos nas margens da pré-visualização. Cada ponto colorido define o raio horizontal de um canto; com Cantos elípticos (8 valores) marcado, os pontos brancos definem os raios verticais.
2. Ou escreve valores exatos em Cantos: Superior esquerdo, Superior direito, Inferior direito e Inferior esquerdo, cada um com um campo Horizontal e um campo Vertical.
3. Escolhe a Unidade: % (percentagem da caixa) ou px (píxeis). Ao mudar, os valores atuais são convertidos e a forma mantém-se igual.
4. Ajusta a Largura da caixa (px) e a Altura da caixa (px) ao teu elemento e usa Todos os cantos para arredondar os quatro cantos de uma vez.
5. Experimenta as Predefinições (Arredondado, Pílula, Círculo, Folha, Gota, Ovo, Bilhete e três blobs) ou clica em Blob aleatório para obter uma forma orgânica.
6. Marca Propriedades individuais se preferires as quatro declarações border-*-radius e copia o Código CSS com Copiar.

Teclado: seleciona um ponto e carrega nas setas para alterar o raio um passo de cada vez (10 com Shift).

A sintaxe do border-radius

border-radius aceita de um a quatro valores, pela ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. Tal como nas margens, os valores em falta são copiados do canto oposto: border-radius: 10px 20px arredonda o canto superior esquerdo e o inferior direito com 10px, e os outros dois com 20px. A ferramenta escreve sempre a forma equivalente mais curta.

Na verdade, cada canto é um quarto de elipse com dois raios. Uma barra separa os raios horizontais dos verticais, o que dá até oito valores:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Antes da barra ficam os raios horizontais dos quatro cantos; depois dela, os raios verticais. Quando as duas listas são iguais, a parte depois da barra é omitida.

Píxeis ou percentagens?

• px dá a mesma curva seja qual for o tamanho do elemento. É a escolha certa para botões, cartões e campos de formulário: border-radius: 8px.
• % é relativo ao elemento: os raios horizontais à largura, os verticais à altura. 50% transforma um quadrado num círculo e um retângulo numa elipse. São as percentagens que permitem que as formas blob acompanhem o tamanho do elemento.

Para um botão em forma de pílula, usa um raio em píxeis de pelo menos metade da altura. A predefinição Pílula faz exatamente isso para o tamanho de caixa que introduziste; um valor enorme como 999px também resulta.

Quando raios adjacentes somam mais do que o lado que partilham, os navegadores reduzem todos os raios proporcionalmente até caberem. É por isso que arrastar dois pontos um para lá do outro não estraga a forma.

Formas blob

As predefinições de blob e o Blob aleatório usam oito percentagens em que os dois pontos de cada lado somam 100 %. Assim as curvas encontram-se na perfeição e a forma parece um seixo liso. Anima a passagem entre dois blobs com uma transition CSS sobre o border-radius para obteres um efeito de «morphing».