Gerador de border-radius CSS – Cantos arredondados e formas orgânicas
Arredonde os cantos de qualquer elemento visualmente. Controle cada canto em pixels ou porcentagem, use modelos de pílula e círculo ou passe para o modo avançado de 8 valores para criar formas orgânicas.
Mova os controles de superior esquerdo, superior direito, inferior direito e inferior esquerdo, ou marque “Mesmo valor em todos os cantos”. Troque a unidade para % para formas que acompanham o elemento. Os modelos criam cards arredondados, pílulas, círculos e folhas; “Forma orgânica” usa a sintaxe de 8 valores. Copie o CSS mais curto possível.
Como usar: Gerador de border-radius
- Escolha um modelo ou mova os controles dos cantos.
- Escolha px ou % como unidade.
- Vincule os cantos se devem ser iguais.
- Use o modo avançado ou Forma orgânica para formas livres.
- Copie o CSS do border-radius.
Como o border-radius funciona
`border-radius` arredonda os cantos de um elemento. Com um valor, os quatro cantos ficam iguais; com quatro, eles seguem o sentido horário a partir do canto superior esquerdo: superior esquerdo, superior direito, inferior direito e inferior esquerdo. Com dois valores, define-se superior esquerdo/inferior direito e superior direito/inferior esquerdo. O gerador sempre usa a forma mais curta.
| CSS | Resultado |
|---|---|
| border-radius: 12px | Card levemente arredondado |
| border-radius: 999px | Pílula em qualquer largura |
| border-radius: 50% | Círculo (num quadrado) ou elipse |
| border-radius: 0 60px | Forma de folha |
| border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% | Forma orgânica |
px ou porcentagem?
Pixels não mudam com o tamanho do elemento, ideal para cards e botões. Porcentagens são calculadas sobre a largura (raio horizontal) e a altura (raio vertical), então 50 % transforma um quadrado em círculo e um retângulo em elipse. Para uma pílula de largura desconhecida, use um valor grande em pixels, como 999px, em vez de 50 %.
Cantos elípticos e formas orgânicas
Cada canto pode ter um raio horizontal e outro vertical, escritos antes e depois de uma barra. Essa sintaxe de 8 valores cria as formas “blob” suaves e irregulares das ilustrações modernas. No modo avançado você controla os oito valores; “Forma orgânica” cria uma nova a cada clique, mantendo as curvas suaves. Anime entre duas formas com uma transição CSS para um efeito vivo.
Dicas
- Em elementos aninhados, o raio interno fica melhor se for o externo menos o padding.
- Imagens dentro de um contêiner arredondado precisam de `overflow: hidden` no contêiner ou de border-radius próprio.
- Raios grandes em botões pequenos apertam o texto; deixe padding suficiente.
Ferramentas CSS relacionadas
Dê profundidade com o Gerador de box-shadow CSS, preencha formas com o Gerador de gradiente CSS, crie cards de vidro com o Gerador de glassmorphism e converta medidas com Conversor de px para rem.
Você também pode gostar destas ferramentas grátis: Formatador JSON, Gerador de senha e Testador de regex.
Perguntas frequentes
Como arredondo cantos no CSS?
Use border-radius, por exemplo border-radius: 12px para todos ou border-radius: 10px 20px 30px 40px para cada canto.
Como faço um círculo com CSS?
Dê a um elemento quadrado border-radius: 50%.
Como faço um botão em forma de pílula?
Use um valor grande como border-radius: 999px; ele continua pílula em qualquer largura.
O que significa a barra no border-radius?
Os valores antes da barra são raios horizontais e os depois, verticais, criando cantos elípticos.
Posso arredondar só um canto?
Sim. Deixe os outros em 0 ou use propriedades como border-top-left-radius.
Última atualização: