Gerador de border-radius CSS
Defina cantos arredondados visualmente: vincule todos os cantos ou ajuste cada um, em px ou %, crie círculos e formas orgânicas, e copie código CSS, SCSS ou Tailwind.
Carregando Gerador de border-radius CSS…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de border-radius CSS
- 1
Abra Gerador de border-radius CSS nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
A propriedade CSS border-radius arredonda os cantos de caixas, botões, cards e imagens. Este gerador de border-radius permite mover controles deslizantes e ver a forma mudar em uma prévia ao vivo, e depois copiar o código. Vincule os quatro cantos para um arredondamento uniforme, ou desvincule para moldar cada canto separadamente, de cards discretos a círculos perfeitos e formas orgânicas.
Como usar
- Mova o controle para arredondar todos os cantos de uma vez, ou desvincule os cantos e ajuste cada um.
- Alterne entre px para arredondamento fixo e % para formas que acompanham o tamanho do elemento.
- Use as predefinições: quadrado, arredondado, círculo e outras, ou gere um blob aleatório.
- Mude a cor da caixa e o fundo da prévia para combinar com o seu design.
- Copie o código CSS, SCSS ou Tailwind.
Formas comuns
| Forma | CSS |
|---|---|
| Card discreto | border-radius: 8px; |
| Botão pílula | border-radius: 9999px; |
| Círculo (elemento quadrado) | border-radius: 50%; |
| Um canto arredondado | border-radius: 0 24px 0 0; |
| Folha | border-radius: 0 50% 0 50%; |
Dicas
- Valores em porcentagem acompanham o tamanho do elemento, então a forma se mantém em qualquer tela.
- Elementos aninhados: dê ao elemento interno um raio menor que o do pai (raio externo menos o padding) para curvas uniformes.
- Imagens precisam de overflow: hidden no elemento pai, ou do raio aplicado direto no img.
- Seja consistente: use dois ou três tamanhos de raio em todo o design system.
Dê profundidade com o gerador de sombras CSS e monte layouts com o gerador de Flexbox.
Perguntas frequentes
Como fazer um círculo com CSS?
Dê a um elemento quadrado border-radius: 50%. Em um retângulo, o mesmo valor cria uma elipse.
Posso arredondar só alguns cantos?
Sim. Desvincule os cantos e ajuste cada um, ou use a sintaxe de quatro valores: superior esquerdo, superior direito, inferior direito, inferior esquerdo.
Devo usar px ou %?
Use px para um arredondamento constante em botões e cards, e % para formas que devem acompanhar o tamanho do elemento, como círculos.
Como fazer um botão em formato de pílula?
Use um raio bem grande, como 9999px. Os cantos ficam totalmente redondos, qualquer que seja a altura do botão.
Posso obter classes do Tailwind?
Sim. Escolha a exportação Tailwind para receber as classes rounded ou valores arbitrários para a sua forma.
O border-radius funciona em imagens?
Sim. Aplique no elemento img, ou em um elemento pai com overflow: hidden.