Simples: usando border-radius: 50%
, que seria mais correto. Cada quadrante atingido pelo radius
só pega metade da largura/altura, não tem muito sentido 100%. É o que precisa pra grande maioria dos casos. Só não pode esquecer do overflow-hidden
se tiver conteúdo que possa "escapar" nas quinas.
Mas para não deixar de responder, que tal apenas usando o background do CSS, com um degradê radial?
background: radial-gradient(ellipse at center,#f00 0%,#f00 0%,#f00 67%,rgba(0,0,0,0) 70%);
Veja em ação:
#circulo1 {
background: radial-gradient(circle closest-side,#f00 0%,#f00 98%,rgba(0,0,0,0) 100%);
}
#circulo2 {
background: radial-gradient(circle closest-side,
#999 0%,#999 74%,#e00 76%,#e00 98%,rgba(0,0,0,0) 100%);
}
#circulo3 {
background:radial-gradient(circle closest-side,
rgba(0,0,0,0) 0%,rgba(0,0,0,0) 78%,#fff 80%,#fff 94%,
#36f 96%,#36f 99%,#fff 100%),
url(https://i.sstatic.net/MVmIb.png) no-repeat center/160px 160px;
}
body {background-color:#fff}
div {width:160px;height:160px;float:left;margin:10px}
<div id="circulo1"></div>
<div id="circulo2"></div>
<div id="circulo3"></div>
Notar que as duas primeiras tem transparência no entorno, mas terceira depende de se acertar o gradient com o fundo da página.
border-radius
para a maior parte das necessidades sempre vai ser mais prático que qualquer outra coisa.