Gerador de border-radius

Sobre esta ferramenta

Ajuste o border-radius dos seus elementos canto a canto, em pixels ou porcentagem, com formas prontas (card, pílula, círculo, gota, folha, aba, balão) e formas orgânicas (blobs) com raios horizontais e verticais diferentes, ou aleatórias. O código CSS é encurtado automaticamente.

Quando usar

Como usar

1. Escolha uma forma pronta ou ajuste os quatro cantos.
2. Ative a forma orgânica para criar blobs.
3. Copie o código border-radius.

Como funciona

Os quatro cantos seguem a ordem do CSS (sentido horário a partir do superior esquerdo). No modo orgânico, um segundo grupo de valores define os raios verticais depois da barra.

O código é encurtado segundo as regras do CSS: um valor se os quatro forem iguais, dois se os cantos opostos coincidirem, três se só os cantos esquerdo e direito diferirem.

Dicas para um melhor resultado

• Use o mesmo raio para todos os elementos de uma família (cards, botões…).
• Um elemento interno deve ter raio menor que o do pai, menos o padding.
• Porcentagens se adaptam ao tamanho do elemento; pixels ficam constantes.
• Blobs ficam melhores em elementos quase quadrados.

Problemas comuns e soluções

Perguntas frequentes

Pesquisas relacionadas

• gerador border radius
• border-radius css
• cantos arredondados css
• blob css
• forma orgânica css
• botão arredondado css