Preenchimento do círculo de plano de fundo CSS div

1. Efeito alvo

preenchimento do círculo de conteúdo div

2. Realização da função

1. raio da borda

border-radius: 50%;
background: #F56C6C;

Problema: Se o div não é um quadrado, o círculo preenchido também não é um círculo

2. caminho do clipe

clip-path: circle(30%);
background: #F56C6C;

Problema: as bordas são afetadas

3. gradiente radial

background: radial-gradient(circle, #F56C6C 66%, transparent 66%);

Problema: as bordas do círculo ficarão irregulares e embaçadas