Qual é o valor máximo de border-radius?

Não há valor máximo definido, mas valores acima de 50px em elementos pequenos podem parecer excessivos.

Posso usar diferentes valores para cada canto?

Sim! Use 4 valores: border-radius: 10px 20px 30px 40px; para TopoEsquerda, TopoDireita, BaseDireita, BaseEsquerda respectivamente.

Crie bordas arredondadas personalizadas com preview visual. Copie código CSS pronto para usar.

Preview do Border Radius

Definir todos iguais:

Topo Esquerda

Topo Direita

Base Direita

Base Esquerda

CSS Gerado

border-radius: 16px 16px 16px 16px;

1 valor: border-radius: 16px; - Aplica a todos os cantos.

2 valores: border-radius: 16px 8px; - Topo/baixo e esquerda/direita.

4 valores: border-radius: 16px 8px 4px 2px; - TopoEsquerda, TopoDireita, BaseDireita, BaseEsquerda.

Percentagem: border-radius: 50%; - Cria círculo perfeito.

Slash: border-radius: 16px / 32px; - 16px para cantos horizontais, 32px para verticais.

Círculo

50%

Pílula

50px 50px 0 0

Botão

4px 4px 8px 8px

Cartão

8px 8px 8px 8px

Oval

50% (com altura diferente)

Compartilhe esta calculadora