CSS div background circle padding

1. Target effect

div content circle padding

2. Function realization

1. border-radius

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

Problem: If the div is not a square, the filled circle is not a circle either

2. clip-path

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

Problem: Borders are affected

3. radial-gradient

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

Problem: The edges of the circle will be jagged and blurry