Unwanted border-radius artefact with box-shadow spread

Question

Goal is a borderless circle with a soft edge, containing text or other elements. How do I get rid of the thin black border line in the following example? I've tried adding a border with the same or transparent color. It can be done with 1px x 1px and large spread, but I want to put stuff inside.

 body { background: black; } div { width: 50px; height: 50px; margin: 50px; padding: 50px; border-radius: 50%; background: white; box-shadow: 0 0 10px 10px white; }

 <div>some text</div>

Answer 1

do it with a radial-gradient()

 body { background: black; } div { width: 50px; height: 50px; margin: 50px; padding: 70px; border-radius: 50%; background: radial-gradient(farthest-side,white calc(100% - 15px),transparent ); }

 <div>some text</div>