Gerador de border-radius CSS
Ajuste 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.
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:
| 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.
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.
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:
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.
- Validar e calcular um dígito de LuhnValide números com o algoritmo de Luhn (módulo 10, ISO/IEC 7812-1) ou calcule o dígito verificador – só confere o formato, direto no navegador.
- Calculadora de proporção (aspect ratio)Calcule a proporção a partir de largura e altura (1920 × 1080 = 16:9), descubra o lado que falta, o valor decimal, o formato padrão mais próximo e o CSS.
- Codificar e Decodificar Base64Codifique e decodifique Base64 e Base64url com UTF-8 correto, além de URL encode/decode (codificação por porcentagem). Erros claros, tudo no navegador.