Sobre esta ferramenta
O Gerador de cantos arredondados controla os cantos pela ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. Com Ligar cantos ativo, alterar qualquer canto atualiza os outros três, permitindo definir cantos uniformes rapidamente.
Como utilizar
- Escolha a unidade do raio e introduza valores não negativos para os quatro cantos.
- Ative Ligar cantos para manter os quatro valores iguais.
- Observe as alterações na forma da caixa de pré-visualização.
- Copie o CSS ou reponha os parâmetros para experimentar outra forma.
Exemplos de utilização
- 10, 20, 30 e 40px definem quatro raios independentes.
- Quatro cantos de 20px produzem border-radius: 20px.
- Superior esquerdo e inferior direito a 10px, com os outros a 20px, abreviam-se para 10px 20px.
border-radius: 10px 20px 30px 40px;
border-radius: 20px;Funcionamento e explicação do CSS
Com quatro valores, border-radius começa no canto superior esquerdo e segue no sentido dos ponteiros do relógio. Quatro valores iguais reduzem-se a um; cantos opostos iguais reduzem-se a dois. Outras combinações também admitem abreviação CSS. O navegador ajusta raios excessivos segundo as regras CSS para os conseguir desenhar.
Utilizações comuns
- Definir cantos uniformes em cartões e botões.
- Criar contentores decorativos com cantos assimétricos.
- Aprender a ordem dos valores e as regras de abreviação de border-radius.
Privacidade
O processamento das entradas, os cálculos, a geração de CSS e as pré-visualizações decorrem no seu navegador. O conteúdo nunca é enviado para um servidor. Não são usados backend, base de dados, API online ou CDN de terceiros, nem as suas entradas são guardadas automaticamente.
FAQ
Qual é a ordem dos quatro cantos?
Superior esquerdo, superior direito, inferior direito e inferior esquerdo, no sentido dos ponteiros do relógio.
Para que serve Ligar cantos?
Quando está ativo, alterar qualquer canto copia o respetivo valor para os outros três.
Porque aparecem por vezes apenas um ou dois valores?
Valores de cantos iguais permitem usar a abreviação padrão CSS. A forma abreviada produz o mesmo resultado que os quatro valores completos.
Porque parece um raio muito grande menor do que o valor definido?
Se a soma dos raios adjacentes ultrapassar as dimensões da caixa, o navegador reduz proporcionalmente todos os cantos segundo as regras CSS para evitar sobreposições.