Ferramentas para desenvolvedores
Gerador de CSS Border Radius
Gere a propriedade CSS border-radius com valores individuais para os quatro cantos e unidade personalizada.
Executar ferramenta
O gerador de CSS border-radius permite criar rapidamente a regra de estilo exata para cantos arredondados em folhas de estilo. O utilizador pode definir os quatro cantos de modo independente: superior esquerdo, superior direito, inferior direito e inferior esquerdo. Se algum valor numérico for omitido no formulário, a ferramenta assume o valor predefinido de 10 para cada canto. Da mesma forma, a unidade de medida pode ser ajustada para qualquer formato pretendido, aplicando-se pixels por omissão se o campo não for preenchido. O resultado apresenta a declaração CSS completa e formatada na ordem canónica dos quatro cantos, pronta para ser copiada diretamente para os seus ficheiros de estilo. Esta ferramenta online simplifica a criação de caixas com cantos simétricos ou assimétricos, eliminando erros manuais de sintaxe ao desenhar botões, cartões ou elementos gráficos modernos para a web.
Instruções
- Introduza o valor numérico para o canto superior esquerdo ou mantenha o valor predefinido de 10.
- Indique o valor numérico pretendido para o canto superior direito.
- Defina os valores numéricos respetivos para os cantos inferior direito e inferior esquerdo.
- Indique a unidade CSS no campo de texto ou mantenha a predefinição px.
- Submeta o formulário para visualizar a declaração CSS border-radius gerada no painel de saída.
Exemplos
- Cantos simétricos de 8px: definir todos os cantos com 8 e unidade px gera border-radius: 8px 8px 8px 8px;
- Cartão com canto superior arredondado: definir superior esquerdo com 16, superior direito com 16, restantes com 0 e unidade px gera border-radius: 16px 16px 0px 0px;
Perguntas frequentes
Qual é a ordem dos cantos na declaração gerada?
A declaração segue a regra padrão de CSS no sentido dos ponteiros do relógio: superior esquerdo, superior direito, inferior direito e inferior esquerdo.
O que acontece se deixar os campos em branco?
Cada campo de canto não preenchido utiliza o valor 10 e a unidade assume automaticamente px.
Posso utilizar unidades como rem ou percentagem?
Sim, pode escrever qualquer unidade suportada por CSS, como rem ou %, no campo de texto da unidade.