Gerador CSS de border-radius

Crie uma forma em três etapas

1. Defina largura e altura entre 1 e 2000 pixels CSS. Informe os raios horizontal e vertical de cada canto em px ou %, ou aplique o par superior esquerdo a todos.
2. Confira a prévia ajustada. Percentuais horizontais usam a largura e verticais usam a altura; mudar a unidade mantém o número, mas altera seu significado.
3. Escolha Somente raio ou CSS da caixa e copie o resultado completo. Se a cópia estiver indisponível, selecione o texto somente leitura. Campos inválidos removem o resultado atual.

Os dois raios de cada canto

Cada canto tem um raio horizontal e um vertical. A barra em border-radius separa quatro valores horizontais de quatro verticais, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo.

Percentuais horizontais usam a largura e verticais usam a altura. Em uma caixa retangular, 50% nas duas direções forma uma elipse, não necessariamente um círculo. Um componente zero deixa o canto quadrado.

Quando raios adjacentes se sobrepõem em uma borda, o navegador reduz os oito componentes por um fator comum. Os pixels resolvidos e usados descrevem esta caixa; valores arredondados não substituem o CSS original.

A prévia posiciona a caixa nas dimensões declaradas antes de ajustá-la visualmente. Apenas o raio pode produzir outro resultado em uma caixa de tamanho diferente. O CSS da caixa acrescenta dimensões, border-box e borda e preenchimento zero, sem as cores da prévia.

Exemplos com unidades mistas

Em uma caixa de 240 por 120, os valores horizontais 75%, 120px, 20%, 30px e verticais 40px, 60%, 60px, 50% produzem fator comum 0,8. Os raios superiores passam a 144 e 96px e os outros componentes também são reduzidos.

Com os mesmos valores em uma caixa de 120 por 240, o fator limitante passa a 4/7. A forma muda sem converter porcentagens em pixels fixos.

Em uma caixa de 240 por 120, raios de 50% nas duas direções usam 120 e 60px. Todos os raios em zero deixam cantos quadrados.

Escopo e interpretação

O editor aceita raios não negativos de até 4000px ou 1000%, com até três casas decimais. Não interpreta CSS arbitrário, calc(), var(), cantos lógicos ou outras unidades.

Use ponto ou vírgula decimal, sem separadores de milhar. A mudança de unidade mantém o número, não o comprimento resolvido. Campos vazios, incompletos ou inválidos removem a prévia e a cópia atuais.

Pixels usados e fator são explicações arredondadas para esta caixa. A renderização pode arredondar subpixels; o CSS copiado mantém os valores e unidades originais.

O ajuste altera apenas a exibição, não a caixa lógica nem a regra exportada. Em outra caixa, o navegador recalcula porcentagens e redução.

O raio molda o fundo ou a borda, mas não recorta sempre os elementos filhos. A ferramenta não inclui upload de imagem, arraste, animação ou regra overflow.

Estilos locais sem rascunhos salvos

A ferramenta não adiciona upload, histórico, links ou solicitações contendo suas configurações. A cópia é explícita. Serviços existentes, extensões e suas próprias cópias não estão cobertos por uma promessa geral de exclusão.