Gerador de Cantos Arredondados
Defina os quatro cantos e receba o CSS mais curto que os produz, com um aviso quando a caixa é pequena demais para eles.
Resultados
O que faz esta ferramenta
Arredondar os quatro cantos por igual é fácil. Arredondar três, ou deixar um em esquadria, obriga a lembrar por que ordem vai a forma curta e como as versões de dois e três valores se distribuem. Esta página pega nos quatro cantos que quer e escreve a linha mais curta que produz exactamente esses, na unidade em que estiver a trabalhar. Confere também os cantos contra o tamanho da caixa, porque o CSS encolhe em silêncio tudo o que não couber.
Fórmula
escreve a forma mais curta de border-radius que dá os quatro cantos pedidos
Variáveis
| Símbolo | Significado | Unidade |
|---|---|---|
top_left | Canto superior esquerdo | — |
top_right | Canto superior direito | — |
bottom_right | Canto inferior direito | — |
bottom_left | Canto inferior esquerdo | — |
unit | Unidade | — |
width | Largura da caixa | px |
height | Altura da caixa | px |
OUT | O CSS | — |
VA | Só o valor | — |
DC | Cantos diferentes | — |
LC | Maior canto | — |
LI | Máximo que a caixa permite | px |
CP | O navegador vai apará-lo | — |
PI | Fica em forma de comprimido | — |
Exemplo resolvido
- Canto superior esquerdo16
- Canto superior direito16
- Canto inferior direito4
- Canto inferior esquerdo16
- Unidadepx
- Largura da caixa240 px
- Altura da caixa140 px
- O CSSborder-radius: 16px 16px 4px;
- Só o valor16px 16px 4px
- Cantos diferentes2
- Maior canto16,0
- Máximo que a caixa permite70,0 px
- O navegador vai apará-loNão
- Fica em forma de comprimidoNão
Perguntas frequentes
Porque é que às vezes me dá menos de quatro números?
Porque o CSS deixa dizer o mesmo de forma mais curta quando os cantos se repetem. Um valor define os quatro. Dois definem o par superior esquerdo e inferior direito, e depois o outro par. Três definem o superior esquerdo, depois os dois cantos da outra diagonal, depois o inferior direito. Esta página escreve sempre a forma mais curta que produz exactamente os cantos que pediu, que é o que escreveria à mão se tivesse a regra decorada.
O que quer dizer «o navegador vai apará-lo»?
Que pediu cantos maiores do que a caixa comporta. Quando dois cantos da mesma aresta somam mais do que o comprimento dessa aresta, o CSS reduz todos proporcionalmente até caberem, por isso a forma que aparece não é a que escreveu. Não é um erro e nada se parte, mas os números da sua folha de estilos deixam de descrever o que está no ecrã — e quando a caixa mudar de tamanho, o resultado muda com ela.