Gerador de Border Radius CSS Online Gratuito
Gere border-radius CSS visualmente. Controle os quatro cantos independentemente.
Who uses the Gerador de Border Radius CSS?
- Desenvolvedores front-end gerando valores de border-radius para componentes de sistemas de design.
- Designers de UI testando opções de arredondamento para alcançar o peso visual certo.
- Iniciantes em CSS explorando a propriedade border-radius por meio de visualização interativa.
How the Gerador de Border Radius CSS works
Use os controles deslizantes para ajustar o raio de cada um dos quatro cantos de forma independente.
Marque "Link all corners" para mover os quatro controles juntos e obter um arredondamento uniforme.
Visualize a forma em tempo real em um elemento de cartão de exemplo.
Copie o valor CSS border-radius gerado para usar diretamente na sua folha de estilos.
Tips & tricks
- Desmarque "Link all corners" para criar cantos assimétricos — útil para balões de fala ou formas estilo aba.
- O CSS gerado usa apenas um valor de raio por canto (border-radius: TL TR BR BL) — para cantos elípticos, edite manualmente o valor copiado usando a sintaxe com barra.
- A ordem dos cantos na abreviação CSS sempre começa no canto superior esquerdo e segue no sentido horário — mesma ordem dos rótulos dos controles deslizantes nesta ferramenta.
- Valores de raio muito grandes em elementos pequenos atingem um limite visual assim que os cantos se encontram no meio.
Frequently Asked Questions
Qual é a sintaxe abreviada do CSS border-radius?
Um valor: border-radius: 8px (todos os cantos iguais). Quatro valores: border-radius: 10px 20px 30px 40px (superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo, sentido horário). Dois valores: border-radius: 10px 20px (superior-esquerdo+inferior-direito, superior-direito+inferior-esquerdo).
Como faço um círculo perfeito com CSS?
Defina border-radius: 50% em um elemento quadrado (largura e altura iguais). Em um elemento não quadrado, 50% cria uma elipse. Para um círculo, use border-radius: 50% em uma div com largura e altura iguais.
O que são cantos elípticos?
O border-radius do CSS suporta raios horizontais e verticais separados para cada canto usando a sintaxe de 8 valores: border-radius: 10px 40px / 40px 10px cria formas orgânicas do tipo "blob". Esta ferramenta não gera essa sintaxe — ela controla apenas um valor de raio por canto.
Posso criar formas orgânicas do tipo "blob" com border-radius?
Sim, escrevendo manualmente a sintaxe completa de 8 valores do CSS (raios horizontais e verticais diferentes para cada canto). Esta ferramenta cobre o caso mais comum de um único raio por canto; para cantos elípticos/blob, edite manualmente o valor copiado.
Que valores criam um arredondamento típico de "cartão"?
4–8px é o padrão para cartões discretos. 12–16px é comum em cartões de UI modernos. 24px ou mais é usado para elementos estilo "pílula" ou "tag". Valores próximos de 50 em cartões pequenos começam a parecer exagerados.
Is my data safe when using the Gerador de Border Radius CSS?
Completely safe. The Gerador de Border Radius CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Gerador de Border Radius CSS output in commercial projects?
Yes. The Gerador de Border Radius CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Gerador de Border Radius CSS follow official standards?
Yes. The Gerador de Border Radius CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.