Border Radius Generator
Generate border radius
Generate border radius Executa localmente no seu navegador
border-radius: 12px;
About the
O Border Radius Generator define os quatro cantos de uma caixa de forma independente, com uma visualização ao vivo, e fornece o CSS. A ordem da taquigrafia é algo que todos esquecem: é canto superior esquerdo, canto superior direito, canto inferior direito, canto inferior esquerdo, indo no sentido horário a partir do canto superior esquerdo. Um valor se aplica a todos os quatro cantos, dois valores se aplicam aos pares diagonais e quatro valores abordam cada canto por vez. Quando todos os quatro correspondem, a ferramenta emite o formato de valor único, que é o que você realmente deseja na maioria das vezes.
Where people use the
- Combinar um raio com uma especificação de design sem adivinhar os valores dos pixels.
- Arredondando apenas os cantos superiores de um cartão ou modal.
- Moldar um botão de pílula, que tem um raio de metade da altura do elemento.
- Encontrar o raio que transforma um avatar quadrado em um círculo.
How to use the
- 1
Arraste um controle deslizante de canto
Cada canto possui seu próprio controle deslizante de 0 a 150 pixels. A caixa de visualização é arredondada conforme você a move.
- 2
Mantenha os cantos vinculados ou desvincule-os
Com Link ativado, mover qualquer controle deslizante move todos os quatro juntos. Desligue-o para moldar cantos individuais, que é como você faz uma cauda de balão ou um formato de folha.
- 3
Leia o CSS
Se todos os quatro corresponderem, você obterá a abreviatura de valor único. Se eles diferirem, você obterá o formato completo de quatro valores no sentido horário.
- 4
Considere uma porcentagem
Um raio de 50% em um elemento quadrado resulta em um círculo. Troque a unidade px por uma porcentagem em sua folha de estilo, se for isso que você precisa.
Dicas e práticas recomendadas
- Use porcentagens quando o elemento for redimensionado e pixels quando isso não acontecer.
- Um botão de comprimido não tem um raio fixo; tem metade da altura, então 9999px é a resposta preguiçosa, mas robusta.
- Mantenha o raio consistente em um conjunto de componentes; misturar 4px, 6px e 8px parece acidental.
Perguntas frequentes
Em que ordem estão os quatro valores?
No sentido horário a partir do canto superior esquerdo: canto superior esquerdo, canto superior direito, canto inferior direito, canto inferior esquerdo. Um mnemônico útil é que ele começa onde você começa a ler e gira como um mostrador de relógio.
O que significam dois ou três valores?
Dois valores definem as diagonais: o primeiro é superior esquerdo e inferior direito, o segundo é superior direito e inferior esquerdo. Três valores definidos no canto superior esquerdo, depois no canto superior direito e no canto inferior esquerdo juntos e, em seguida, no canto inferior direito.
Como faço um círculo?
Use 50% em um elemento que já é quadrado. O uso de pixels só gera um círculo se o raio for igual à metade da largura, o que quebra no momento em que o elemento é redimensionado.
Posso arredondar cantos de forma diferente na horizontal e na vertical?
A sintaxe completa permite um raio elíptico escrito como valores horizontais, uma barra e depois valores verticais. Esta ferramenta emite uma forma uniforme mais simples, então adicione a versão com barra manualmente se precisar dessa forma.
Por que meu canto arredondado está cortado?
Porque o conteúdo filho não é cortado na caixa arredondada. Adicione um estouro oculto ao elemento, ou a imagem ou plano de fundo dentro dele ainda mostrará cantos quadrados.