Como gerar uma declaração CSS border-radius para quatro cantos

Indique os quatro valores dos cantos e a unidade para gerar uma declaração CSS border-radius. Os campos seguem a ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo; valores e unidade omitidos usam 10 e px, respetivamente.

Para que serve o gerador de border-radius

Esta ferramenta ajuda a preparar uma declaração CSS border-radius para criar cantos arredondados. Pode ser útil quando precisa de definir o raio dos quatro cantos de forma uniforme ou quando pretende combinar valores diferentes no mesmo elemento.

Em vez de escrever a declaração manualmente, indique o valor do canto superior esquerdo, do canto superior direito, do canto inferior direito e do canto inferior esquerdo. Também pode indicar a unidade a aplicar. O resultado é uma declaração border-radius, não uma folha de estilos completa nem uma configuração mais abrangente do elemento.

Como gerar a declaração CSS

1. Abra o gerador e localize os quatro campos correspondentes aos cantos: superior esquerdo, superior direito, inferior direito e inferior esquerdo.

2. Introduza os valores pretendidos pela ordem apresentada. Por exemplo, para obter cantos uniformes, use o mesmo número nos quatro campos. Para uma forma assimétrica, introduza um número diferente em pelo menos um deles. Um valor zero também pode ser usado quando não pretende arredondamento num canto.

3. Selecione ou introduza a unidade pretendida no controlo disponível. Quando não indicar uma unidade, é usada px. A unidade fornecida é acrescentada a cada valor na declaração gerada.

4. Execute a geração e leia a declaração CSS apresentada. Confirme que os quatro valores aparecem na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo antes de a copiar para o local adequado no seu CSS.

5. Se deixar um valor de canto por preencher, tenha em conta que esse valor assume 10. Se também não indicar a unidade, o resultado usa px. Reveja estes valores predefinidos quando o objetivo for um desenho sem arredondamento ou quando estiver a trabalhar com outra unidade.

Como interpretar o resultado

A declaração produzida representa apenas a propriedade CSS border-radius com os quatro valores fornecidos. A posição de cada número importa: trocar dois campos altera os cantos a que os valores se aplicam. Se todos os valores forem iguais, a declaração descreve um arredondamento uniforme; se forem diferentes, descreve uma configuração assimétrica. Com valores zero, os cantos correspondentes ficam representados sem raio de arredondamento.

Leia também a unidade em cada valor. A ferramenta acrescenta o texto da unidade fornecida a cada canto, pelo que deve confirmar se essa unidade corresponde à forma como pretende escrever o CSS. Os valores omitidos e a unidade omitida não ficam em branco: são substituídos pelas predefinições indicadas acima. A ferramenta gera a declaração, mas não constitui uma folha de estilos completa nem confirma, neste guia, se os valores introduzidos são adequados ao seu layout.

Exemplo prático

Num cartão com cantos deliberadamente diferentes, pretende definir o canto inferior esquerdo sem arredondamento e usar rem nos restantes valores.

Introduza 4, 8, 12 e 0 nos campos dos quatro cantos, selecione rem como unidade e execute a geração.

O resultado é uma declaração CSS border-radius com quatro valores acompanhados da unidade fornecida, colocados na ordem dos quatro cantos.

Limitações

• O resultado limita-se a uma declaração CSS border-radius; não é uma folha de estilos completa nem cobre outras propriedades de estilo.

Erros comuns

• Um resultado inesperado pode surgir quando os campos são preenchidos numa ordem diferente ou quando se deixa um campo vazio sem considerar o valor predefinido 10. Corrija a sequência dos quatro cantos e preencha explicitamente os valores que não devem assumir a predefinição.

Perguntas frequentes

Qual é a ordem dos valores de border-radius?

A declaração usa, pela ordem, o canto superior esquerdo, o superior direito, o inferior direito e o inferior esquerdo.

O que acontece se eu não preencher um valor ou uma unidade?

Quando um valor de canto é omitido, é usado 10; quando a unidade é omitida, é usada px.

A unidade escolhida aplica-se aos quatro cantos?

A unidade fornecida é acrescentada a cada valor na declaração gerada, por isso deve confirmar o texto da unidade antes de utilizar o resultado.