Pontos-chave
- 01Três modos — uniforme, por canto e elíptico — cobrem tudo, desde botões arredondados simples até formas blob orgânicas.
- 02Suporta unidades px, %, e rem, cada uma com comportamento de dimensionamento diferente.
- 03O modo elíptico expõe raios horizontais e verticais por canto para a sintaxe completa de border-radius do CSS.
- 04A visualização ao vivo usa a propriedade CSS real, portanto o que você vê é exatamente o que seu navegador renderizará.
De Cantos Arredondados Simples a Formas Blob Orgânicas
Um valor de border-radius de quatro cantos é fácil o suficiente para digitar de memória — border-radius: 8px. Mas uma vez que você precisa de raios diferentes por canto, ou quer a sintaxe elíptica do CSS para formas orgânicas, a abreviação fica críptica rapidamente. A forma completa é top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — oito valores em uma ordem específica.
O gerador de border-radius do Handytool permite que você arraste controles deslizantes para cada canto em qualquer modo e veja a forma atualizar ao vivo. Alterne entre px, %, e rem sem recalcular, e copie a abreviação correta ou a declaração CSS de forma longa quando terminar.
Como Projetar um Border Radius
- 01
Escolha um modo
O modo uniforme aplica um raio a todos os quatro cantos. O modo por canto controla cada canto independentemente. O modo elíptico adiciona um raio horizontal e vertical separado por canto.
- 02
Escolha uma unidade
Escolha px para tamanhos absolutos, % para valores que se dimensionam com as dimensões do elemento, ou rem para tamanhos vinculados ao tamanho da fonte raiz.
- 03
Arraste os controles deslizantes
Ajuste os valores de raio e veja o elemento de visualização atualizar ao vivo. Para o modo por canto, arraste o controle deslizante de cada canto independentemente.
- 04
Visualize a forma
A caixa de visualização aplica a propriedade CSS border-radius real, portanto a forma que você vê é a forma que seu navegador renderizará.
- 05
Copie o CSS
Clique em Copiar para obter a declaração de border-radius e cole-a em sua folha de estilos.
Formas Comuns e Quando Usar Cada Modo
- 01Botão em forma de pílula: modo % uniforme, definido para 50% — sempre uma pílula completa independentemente da largura do botão
- 02Cartão com arredondamento sutil: modo px uniforme, 8–16px — o padrão de UI mais comum
- 03Etiqueta ou rótulo assimétrico: modo por canto, agudo de um lado, arredondado do outro
- 04Círculo de avatar: modo % uniforme, 50% — se dimensiona com o contêiner de imagem
- 05Forma blob orgânica: modo elíptico com valores X/Y diferentes por canto
Visualização Instantânea, Nada Enviado
O gerador de border-radius é totalmente do lado do cliente. Controles deslizantes, alternâncias de modo e mudanças de unidade atualizam a visualização imediatamente sem viagem de servidor. Não há conta e sem limite de taxa.
A ferramenta funciona em todos os navegadores modernos. A propriedade border-radius — incluindo sintaxe elíptica X/Y — é suportada em todas as versões evergreen do Safari, Firefox, Edge e Chrome, portanto a saída é segura para usar sem prefixos de fornecedor ou fallbacks.
Perguntas Frequentes do Gerador de Border-Radius
Qual é a diferença entre px e % para border-radius?
Raios em pixels são absolutos — 16px é sempre 16px. Raios em porcentagem são relativos às dimensões do elemento, portanto 50% cria um círculo perfeito em uma caixa quadrada e uma elipse em um retângulo.
Quando devo usar o modo elíptico?
Use o modo elíptico quando você quer um canto que se projete mais em um eixo — para uma pílula horizontal, uma forma de folha ou um blob orgânico. O CSS expressa isso como X-radii / Y-radii na abreviação de border-radius.
Por que meu raio em porcentagem parece errado em uma caixa não quadrada?
Porcentagens horizontais são relativas à largura do elemento; porcentagens verticais à sua altura. Em um elemento largo e curto, os cantos se esticam em elipses em vez de arcos circulares.
A saída funciona em todos os navegadores?
Sim — border-radius incluindo sintaxe elíptica é suportado em todos os navegadores modernos: todas as versões evergreen do Safari, Firefox, Edge e Chrome. Nenhum prefixo de fornecedor necessário.
Como faço para criar um círculo perfeito com border-radius?
Defina todos os cantos para 50% no modo de porcentagem em um elemento quadrado. O elemento também precisa ter largura e altura iguais — use aspect-ratio: 1 / 1 se o tamanho for dinâmico.