Início / CSS e cores / Gerador de border-radius
Gerador de border-radius
Quatro controles, um por canto, com uma forma ao vivo para observar. A regra gerada se reduz à forma curta quando os quatro cantos coincidem, então você copia o CSS mais limpo em vez de quatro valores repetidos.
Como usar
- Arraste o controle de cada canto.
- Veja a prévia ganhar forma.
- Copie a regra abaixo.
Exemplos
- Os quatro em 16px → border-radius: 16px.
- Cantos superiores arredondados e inferiores retos formam uma aba ou cabeçalho de cartão.
- Um canto em zero e os outros grandes dá o formato de balão de fala.
Perguntas frequentes
O que uma porcentagem faz?
Ela escala com o elemento em vez de ficar fixa, então 50% em um quadrado vira um círculo perfeito e em um retângulo vira uma elipse. Pixels fixos mantêm a mesma curvatura visual qualquer que seja o tamanho.
Por que fica estranho em um elemento pequeno?
Porque um raio maior que a metade do elemento é limitado pelo navegador e as curvas vizinhas se fundem. Mantenha o raio abaixo da metade do lado mais curto ou aceite o formato de pílula resultante.
Ferramentas relacionadas
Atualizado: 2026-08-07