Gerador de border-radius
CSS border-radius com controle de cada canto em pixels ou porcentagem, visualização em tempo real e código pronto para copiar.
CSS gerado
CSS
border-radius: 12px;
Como funciona
Este gerador de border-radius oferece controle individual de cada canto do CSS border-radius, em pixels ou porcentagem, com visualização em tempo real e o código CSS exato para copiar. Vincule os quatro cantos para um arredondamento uniforme ou desvincule-os para definir cada canto independentemente.
- Escolha uma unidade
Pixels para uma curva fixa ou porcentagem para uma curva que escala com o elemento.
- Defina cada canto
Arraste o controle deslizante ou digite um número exato. Desvincule para definir os cantos independentemente.
- Copie o CSS
A forma abreviada é reduzida automaticamente quando os cantos coincidem.
A forma abreviada do border-radius
A propriedade border-radius aceita até quatro valores, sempre nesta ordem:
border-radius: top-left top-right bottom-right bottom-left;
Quando todos os quatro cantos coincidem, os navegadores aceitam um único valor. Quando o canto superior esquerdo é igual ao inferior direito e o superior direito é igual ao inferior esquerdo, dois valores são suficientes. Esta ferramenta gera automaticamente a forma válida mais curta.
Pixels versus porcentagem
- Pixels: uma curva fixa que mantém o mesmo tamanho independentemente do redimensionamento do elemento.
- Porcentagem: o raio horizontal é uma porcentagem da largura do elemento e o raio vertical é uma porcentagem da altura, de modo que a curva escala com a caixa. Com 50% em um elemento quadrado, todos os quatro cantos se encontram no centro e a forma torna-se um círculo.
Quando os raios se sobrepõem
Se a soma dos raios de dois cantos que compartilham uma aresta for maior que o comprimento dessa aresta, os navegadores reduzem ambos proporcionalmente para que caibam exatamente. É isso que faz com que um raio grande em pixels em um elemento curto e largo se torne uma forma de pílula totalmente arredondada em cada extremidade, sem necessidade de CSS adicional.
Suporte do navegador
border-radius, incluindo valores percentuais independentes por eixo, funciona em todos os navegadores atuais. Prefixos de fornecedores antigos do CSS3, como -webkit-border-radius, não são mais necessários.
Perguntas frequentes
Como defino valores diferentes de border-radius para cada canto no CSS?
A propriedade abreviada border-radius aceita até quatro valores na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo: border-radius: 12px 8px 20px 4px;. Desative a opção Vincular todos os cantos nesta ferramenta, defina cada controle deslizante ou campo numérico individualmente e copie o CSS gerado que usa a sintaxe completa de quatro valores.
Como crio um círculo com border-radius no CSS?
Defina border-radius como 50% em um elemento que tenha largura e altura iguais. O painel Predefinições inclui uma opção Círculo que define todos os quatro cantos como 50% e ajusta a visualização para um quadrado, exibindo o resultado claramente. O CSS gerado é simplesmente border-radius: 50%; aplicado a um elemento de 100 por 100 pixels, isso produz um círculo perfeito.
Qual é a diferença entre as unidades px e porcentagem para border-radius?
Valores em pixel criam uma curva de canto fixa, independentemente do tamanho do elemento, então o arredondamento permanece constante ao redimensionar a caixa. Valores em porcentagem são relativos à largura e altura do próprio elemento, então a mesma porcentagem parece diferente em um botão pequeno e em um cartão grande. Alterne entre as unidades com a opção px e porcentagem acima dos controles deslizantes.
Como funciona a opção Vincular todos os cantos?
Quando Vincular todos os cantos está ativado, arrastar qualquer controle deslizante atualiza os quatro cantos para o mesmo valor, o que é útil para arredondamentos uniformes, como em cartões. Desative para controlar cada canto independentemente. Aplicar uma predefinição sempre desativa o vínculo depois, permitindo que você ajuste o resultado.
Por que um raio grande às vezes parece menor do que o esperado?
Quando a soma dos raios de dois cantos adjacentes na mesma borda ultrapassa o comprimento dessa borda, os navegadores reduzem ambos proporcionalmente para que as curvas se encontrem exatamente no meio da borda. Em um elemento largo e baixo, isso cria uma forma de pílula totalmente arredondada a partir de um valor comum em pixel, conforme demonstrado pela predefinição Pílula nesta ferramenta.