Gerador de border-radius CSS
Arredonde cada canto separadamente, crie formas elípticas e orgânicas e copie o CSS com prévia ao vivo.
Processado no seu dispositivo. Nada do que você digita é enviado.
Como usar: gerador de border-radius css
- Mova os controles de cada canto — ou mantenha Mesmo valor nos 4 cantos marcado.
- Escolha a unidade (px, % ou rem) e, se quiser formas orgânicas, ative os cantos elípticos.
- Copie a linha
border-radius, já na forma abreviada mais curta.
Sobre esta ferramenta
Com quatro valores, o border-radius segue o sentido horário a partir do canto superior esquerdo: superior esquerdo, superior direito, inferior direito e inferior esquerdo. A ferramenta abrevia automaticamente: 8px 8px 8px 8px vira 8px e 8px 0 8px 0 vira 8px 0.
Com uma barra (/), cada canto ganha um raio horizontal e outro vertical, formando arcos de elipse — é assim que se fazem as formas "blob" orgânicas. Em porcentagem, 50% transforma um quadrado em círculo; para botões em formato de pílula, use um valor bem alto em px, como 999px.
Perguntas frequentes
Qual a diferença entre usar px e % no border-radius?
Em px o arredondamento é fixo. Em % ele é proporcional à largura (raio horizontal) e à altura (raio vertical) do elemento, por isso um retângulo com 50% vira uma elipse.
Por que 999px funciona para criar uma pílula?
Quando a soma dos raios passa do tamanho do elemento, o navegador reduz todos proporcionalmente até caberem, resultando em pontas perfeitamente redondas.
É grátis mesmo? Existe limite diário?
É grátis e sem limite diário. Como o processamento acontece no seu aparelho, não temos custo por uso e não precisamos limitar você.
Funciona no celular?
Sim. O site funciona em qualquer navegador moderno no Android, iPhone, Windows, Mac e Linux, sem instalar nada.