Gerador de border-radius CSS
Ajuste o arredondamento de cada canto com controles deslizantes e veja o resultado ao vivo. Use um único raio, um por canto ou raios elípticos para formas orgânicas, em px, % ou rem. Copie o CSS quando gostar.
Processado 100% no seu navegador
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
- 1Escolha o modo: todos iguais, por canto ou elíptico.
- 2Mova os controles e mude a unidade se precisar.
- 3Experimente as formas rápidas como pílula, círculo ou folha.
- 4Copie o CSS gerado e cole na sua folha de estilos.
Casos de uso
- Arredondar cartões, botões e imagens de uma interface.
- Criar formas de gota ou orgânicas para fundos e avatares.
- Fazer um círculo perfeito ou um botão em forma de pílula.
- Entender como funciona a sintaxe com barra do border-radius.
Perguntas frequentes
Como faço um círculo com border-radius?
Use 50% em uma caixa quadrada. Em uma caixa retangular você obtém uma elipse; para uma pílula, use um raio muito grande, como 999px.
O que significa a barra em 50% / 30%?
Ela separa os raios horizontais dos verticais. Com isso cada canto pode ser uma elipse em vez de um quarto de círculo, o que permite formas orgânicas.
Em que ordem ficam os valores?
Começam no canto superior esquerdo e seguem o sentido horário: superior esquerdo, superior direito, inferior direito e inferior esquerdo.
É melhor usar px, % ou rem?
Os px dão um arredondamento fixo, o % se adapta ao tamanho da caixa (útil para círculos e gotas) e os rem escalam com o tamanho da fonte da página.