Muito além de cantos arredondados
border-radius é uma das propriedades mais usadas do CSS: está em botões, cards, avatares e campos de formulário. Para o caso simples basta um número, mas a propriedade faz muito mais. Cada canto pode ter um valor diferente, e cada canto pode ser elíptico, com um raio horizontal e outro vertical. Combinando isso, dá para criar formas orgânicas, os chamados blobs, sem SVG.
Neste gerador você ajusta os quatro cantos de forma vinculada (todos iguais) ou individual, em pixels ou porcentagem. Ao ativar os cantos elípticos, cada canto ganha raio horizontal e vertical, e o resultado usa a sintaxe de oito valores com barra: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%.
Há predefinições para as formas mais procuradas: pílula, círculo e blob orgânico. A prévia mostra a forma em tempo real e o CSS gerado é sempre o mais curto possível: se os quatro cantos forem iguais, sai um único valor; se forem simétricos, dois ou três, seguindo as regras de abreviação do CSS.
O gerador funciona no seu navegador e é gratuito, sem limites: crie e copie quantas formas quiser, sem precisar do Pro.
Como gerar um border-radius
- Comece por uma predefinição (pílula, círculo ou blob) ou do zero.
- Escolha se os quatro cantos ficam vinculados ou individuais e a unidade (px ou %).
- Ative os cantos elípticos para definir raio horizontal e vertical.
- Confira a forma na prévia ao vivo.
- Copie o border-radius gerado.
Onde usar border-radius
- Botões em formato de pílula e tags.
- Avatares e imagens circulares.
- Cards com apenas os cantos superiores arredondados.
- Formas orgânicas (blobs) para fundos e ilustrações.
- Balões de chat com um canto diferente dos outros.
A ordem dos valores e a sintaxe com barra
- Um valor: os quatro cantos iguais.
- Quatro valores: superior esquerdo, superior direito, inferior direito, inferior esquerdo (sentido horário).
- Dois valores: o primeiro para superior esquerdo e inferior direito, o segundo para os outros dois.
- Barra: os valores antes dela são os raios horizontais, os depois são os verticais.
- Círculo: border-radius: 50% em um elemento quadrado.
- Pílula: um valor em px muito grande (como 9999px) em vez de 50%, que geraria uma elipse.
Perguntas Frequentes
O gerador de border-radius é grátis?
Sim. Os geradores de CSS são gratuitos e sem limites, sem precisar do Pro.
Px ou porcentagem?
Px mantém a mesma curva em qualquer tamanho. A porcentagem é relativa às dimensões do elemento, útil para círculos e formas orgânicas que escalam.
Como faço uma forma blob?
Use a predefinição blob ou ative os cantos elípticos com valores diferentes em porcentagem em cada canto.
Por que 50% não gera um botão pílula?
Em um retângulo, 50% gera uma elipse. Para pílula, use um valor em px maior que a metade da altura.
O conteúdo é cortado pelo border-radius?
O fundo e a borda sim. Para cortar imagens ou filhos que saem dos cantos, adicione overflow: hidden.