Gerador de border-radius CSS
Este gerador de border radius CSS ajusta o arredondamento de todos os cantos de uma vez ou de cada canto separado, em pixels ou porcentagem, e, se quiser, de forma elíptica com raios horizontal e vertical diferentes. O gerador escreve o valor na forma válida mais curta, mostra as quatro propriedades individuais e calcula quais raios o navegador realmente usa no tamanho da sua caixa.
Fonte: css-backgrounds-3, § 4.1, W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties. Atualizado em: .
Como o cálculo é feito
Como o navegador lê o border-radius
A forma abreviada aceita de um a quatro valores na ordem superior esquerdo, superior direito, inferior direito, inferior esquerdo – no sentido horário. Valores que faltam são completados como no margin:
Como criar bordas arredondadas
- Ajuste um raio único para todos os cantos ou desvincule-os e defina cada canto separadamente, em px ou %.
- Para cantos elípticos, escolha separadamente o raio horizontal e o vertical e informe a largura e a altura da caixa.
- Copie a declaração CSS mais curta e confira quais raios o navegador realmente usa nesse tamanho de caixa.
| Valor | Significado |
|---|---|
12px | os quatro cantos com 12 px |
24px 8px | superior esquerdo e inferior direito 24 px; superior direito e inferior esquerdo 8 px |
24px 8px 4px | superior esquerdo 24 px; superior direito e inferior esquerdo 8 px; inferior direito 4 px |
40px 10px / 20px 5px | elíptico: raios horizontais antes da barra e verticais depois |
O gerador reduz cada entrada à forma equivalente mais curta: 10px 10px 10px 10px vira 10px, e uma barra com os mesmos valores some.
Porcentagem: largura e altura separadas
Porcentagens se referem à largura da caixa na horizontal e à altura na vertical. Por isso 50% transforma um quadrado em círculo, mas um retângulo de 240 × 160 px em uma elipse com raios de 120 px e 80 px. Para cantos circulares em um retângulo, use pixels.
Quando as curvas se sobrepõem
Se dois raios vizinhos somam mais que o lado que dividem, a especificação do W3C manda o navegador reduzir todos os raios pelo mesmo fator f = mín(comprimento do lado ÷ soma dos dois raios desse lado).
Exemplo “pílula” border-radius: 9999px em um botão de 200 × 40 px: à esquerda e à direita a soma é 9999 + 9999 = 19.998 px para 40 px de altura, então f = 40 ÷ 19.998 ≈ 0,002. Cada canto fica com 9999 × f = 20 px – exatamente metade da altura, com pontas em semicírculo. Em “Raios usados” você vê esses valores para a sua caixa.
Mais ferramentas de CSS: crie sombras com o gerador de box-shadow CSS, degradês com o gerador de gradiente CSS e converta valores HEX, RGB ou HSL com o conversor de cores.
Perguntas frequentes
Como fazer um círculo com CSS?
Aplique border-radius: 50% a um elemento quadrado. Em um retângulo, 50% gera uma elipse; para pontas arredondadas (formato de pílula), use um valor em pixels bem grande, como 9999px.
O que significa a barra no border-radius?
Ela separa os raios horizontais dos verticais. 40px / 20px arredonda cada canto como um quarto de elipse, com 40 px de largura e 20 px de altura. Com até quatro valores de cada lado, são oito valores no total.
Por que o arredondamento ficou menor que o informado?
Porque as curvas se sobreporiam. O navegador então reduz todos os raios na mesma proporção – até cantos que caberiam sozinhos. O gerador mostra o fator e os raios realmente usados.
Qual é a ordem dos quatro valores?
Superior esquerdo, superior direito, inferior direito, inferior esquerdo – no sentido horário. As propriedades individuais são border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius.
Como arredondar só um canto?
Ajuste os cantos separadamente e deixe os outros em 0. Arredondar só o canto inferior esquerdo resulta em border-radius: 0 0 0 12px, o mesmo que border-bottom-left-radius: 12px.
Fontes e base legal
- css-backgrounds-3, § 4.1: W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties
- css-backgrounds-3, § 4.5: W3C – CSS Backgrounds and Borders Module Level 3: Overlapping Curves
- MDN Web Docs – border-radius
Última atualização: · Princípios editoriais
Ferramentas relacionadas
- Gerador de box-shadow CSSCrie sombras CSS com controles: várias sombras, deslocamento, desfoque, expansão, cor com transparência, inset e modelos – prévia ao vivo e CSS para copiar.
- Gerador de gradiente CSSCrie gradientes CSS: lineares, radiais ou cônicos, quantas paradas de cor quiser, ângulo e cor de fallback – prévia ao vivo e CSS pronto para copiar.
- Conversor de cores: HEX, RGB, HSL, HSV, CMYKConverta cores: HEX para RGB, RGB para HEX, HSL, HSV, HWB e CMYK. Digite em qualquer formato ou use o seletor de cores e copie o resultado, tudo no navegador.
- Qual é o meu endereço IP?Mostra na hora seu endereço IP público, detecta se é IPv4 ou IPv6 e explica a diferença. Grátis – seu IP não é armazenado.
- Comparar dois JSONComparar JSON: encontre as diferenças entre dois documentos JSON com caminho, valor antigo e novo. A ordem das chaves não importa. No navegador.
- Gerador de CPF e CNPJ válido para testesGerador de CPF e CNPJ válido para testes, inclusive CNPJ alfanumérico, e validador de dígitos verificadores. Grátis, sem cadastro, tudo no seu navegador.
- JSON escape / unescapeJSON escape e unescape online: transforme um texto em uma string JSON válida com aspas, barras invertidas e quebras de linha escapadas, ou faça o contrário.
- Converter px em remConverter px em rem com seu próprio tamanho base, além de em, pt, porcentagem e vw, e uma tabela de tamanhos de fonte comuns. Grátis e sem cadastro.
- Calculadora CSS clampCalculadora CSS clamp para tamanhos de fonte e espaçamentos fluidos: informe valor mínimo, máximo e faixa de viewport e copie o clamp() pronto.