Como usar: Gerador de Border Radius
- Arraste o controle deslizante para arredondar os quatro cantos, ou escolha Cada canto para definir separadamente superior esquerdo, superior direito, inferior direito e inferior esquerdo.
- Troque a unidade:
pxpara um arredondamento fixo,%para escalar com o elemento (50% em um quadrado vira um círculo). - Escolha Elíptico ou Blob aleatório para formas orgânicas com 8 valores.
- Copie o CSS: ele é encurtado para o menor número de valores que mantêm a mesma forma.
Como funcionam os valores de border-radius
| CSS | Cantos |
|---|---|
border-radius: 12px | todos os quatro |
border-radius: 12px 4px | superior esquerdo e inferior direito, superior direito e inferior esquerdo |
border-radius: 12px 8px 4px 0 | superior esquerdo, superior direito, inferior direito, inferior esquerdo (sentido horário) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | elíptico: raios horizontais / raios verticais — formas blob |
Botões pill: use um valor grande como 9999px — o navegador limita o valor à metade da altura, então as pontas continuam redondas em qualquer tamanho. Círculos: 50% em um elemento quadrado. As porcentagens são relativas à largura da caixa (raios horizontais) e à altura (raios verticais).
Relacionados: Gerador de Box Shadow, Gerador de Gradiente CSS, Gerador de Glassmorphism.
Também pesquisado como: border radius css, bordas arredondadas css, gerador border radius online, cantos arredondados css, gerador de blob css, border-radius generator, botão pill css.
Ferramentas que combinam com: Gerador de Border Radius
- Gerador de CSS Grid — Defina as colunas, linhas e o espaçamento (gap), depois arraste sobre as células para criar áreas como header, sidebar e main.
- Gerador de Filtro CSS — Ajuste blur, brilho, contraste, saturação, matiz, escala de cinza, sépia, inversão e sombra projetada em uma imagem de exemplo ou na sua e copie o CSS do filter.
- Gerador de Cubic Bezier — Modele uma curva de easing arrastando duas alças e compare com os easings padrão.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
Perguntas frequentes
Como fazer cantos arredondados em CSS?
Use border-radius, por exemplo border-radius: 12px para todos os cantos, ou quatro valores para superior esquerdo, superior direito, inferior direito e inferior esquerdo.
Como fazer um botão em formato de pílula?
Defina border-radius com um valor grande, como 9999px. O navegador limita o valor à metade da altura, então as pontas ficam sempre perfeitamente redondas.
Como fazer um círculo?
Dê ao elemento a mesma largura e altura e use border-radius: 50%.
O que significa a barra no border-radius?
Os valores antes da barra são os raios horizontais e os valores depois dela são os raios verticais. Assim, cada canto vira uma elipse, e é assim que se criam as formas blob.
Posso instalar o Gerador de Border Radius como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Border Radius é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.