Gerador de Border Radius

O que é border-radius?

border-radius é a propriedade CSS que arredonda os cantos da caixa de um elemento. Um único valor arredonda cada canto igualmente; quatro valores arredondam cada canto independentemente. É uma das propriedades mais usadas no design web moderno — botões em forma de pílula, cartões arredondados, avatares circulares e modais com cantos suaves, tudo se resume a uma única declaração.

Ordem dos cantos

Quando você especifica quatro valores, o CSS sempre os aplica na mesma ordem, começando no canto superior esquerdo e movendo-se no sentido horário:

1. Superior-esquerdo
2. Superior-direito
3. Inferior-direito
4. Inferior-esquerdo

Portanto, border-radius: 10px 20px 30px 40px; arredonda o canto superior-esquerdo em 10px, o superior-direito em 20px, o inferior-direito em 30px e o inferior-esquerdo em 40px. Esta ferramenta segue a mesma ordem exata, e seus quatro controles deslizantes de canto estão rotulados para corresponder.

Como usar esta ferramenta

1. Deixe Igual para todos os cantos habilitado e arraste o controle deslizante Superior Esquerdo para definir um raio para toda a caixa — este é o caso comum (botões, cartões, avatares).
2. Desative Igual para todos os cantos para revelar controles deslizantes independentes para cada um dos quatro cantos e defina-os individualmente para uma forma assimétrica (bolhas de fala, lágrimas, cartões inclinados).
3. Escolha uma Unidade — px para um raio de pixel fixo, % para um raio relativo ao tamanho do próprio elemento (útil para círculos/elipses perfeitos em caixas quadradas), ou em/rem para escalar com o tamanho da fonte.
4. Copie o CSS gerado da caixa CSS, ou baixe como arquivo .css, e cole em sua folha de estilo.

A saída é atualizada instantaneamente conforme você ajusta qualquer controle — não há uma etapa separada de "gerar".

Por que a saída às vezes é mais curta do que o esperado

Se todos os quatro cantos terminarem iguais, a ferramenta emite o formulário de valor único compacto (border-radius: 20px;) em vez de repetir desnecessariamente o mesmo valor quatro vezes (border-radius: 20px 20px 20px 20px;). Ambos são CSS válidos e renderizam identicamente — o formulário de valor único é apenas mais limpo de ler e manter. Assim que qualquer canto diferir, todos os quatro valores serão escritos explicitamente, na ordem superior-esquerdo → superior-direito → inferior-direito → inferior-esquerdo descrita acima.

Perguntas Frequentes

Posso usar uma porcentagem para um círculo perfeito? Sim — defina a unidade como % e o raio (uniforme) como 50% em um elemento quadrado (largura e altura iguais). Isso arredonda os quatro cantos em um círculo completo.

Qual é a diferença entre px, %, em e rem? px é um tamanho fixo independentemente do contexto. % é relativo à largura/altura do próprio elemento, portanto, escala automaticamente se a caixa for redimensionada. em é relativo ao tamanho da fonte do próprio elemento; rem é relativo ao tamanho da fonte raiz (html), portanto, escala consistentemente com o tamanho de texto base da página onde quer que seja usado.

Esta ferramenta suporta cantos elípticos (raios horizontais/verticais separados)? Não no momento — esta ferramenta cobre os casos comuns uniformes e de quatro cantos. Para cantos elípticos, use o shorthand CSS border-radius: <valores horizontais> / <valores verticais> diretamente em sua folha de estilo.

Isso funcionará em todos os navegadores? Sim. border-radius tem sido suportado sem prefixo em todos os navegadores principais por mais de uma década.

Privacidade

Tudo acontece em seu navegador. Nenhum CSS, valores ou configurações que você insira são jamais enviados para um servidor — a declaração é gerada e atualizada localmente conforme você digita.