Pré-visualização de borda

Aplique border-radius: 50% a um elemento quadrado para criar um círculo perfeito. Defina os quatro cantos em 50%.

Sim, border-radius pode ter quatro valores individuais: top-left, top-right, bottom-right, bottom-left. Isso permite formas assimétricas únicas.

De seis a doze pixels em botões e de oito a dezesseis em cartões funciona na maioria das interfaces. Mais que o número exato, o que importa é a coerência: se botões e campos de entrada na mesma tela têm raios diferentes, o conjunto parece desarrumado. Quando há uma imagem dentro de um cartão, dê ao elemento interno um raio um pouco menor que o externo, ou as duas curvas vão se contradizer visivelmente.

50% quer dizer "metade de cada lado", então, se o elemento não for quadrado, os raios horizontal e vertical divergem e sai uma elipse. Para um círculo de verdade, dê o mesmo valor a width e height ou acrescente aspect-ratio: 1. Se quiser formato de cápsula num botão cuja largura acompanha o texto, use um valor fixo grande como 9999px em vez de 50%: as pontas ficam sempre semicírculos perfeitos na altura que o elemento tiver.