How does the milled edge actually work?
A repeating-conic-gradient sweeps around the circle with hard stops, producing alternating wedges of dash color and transparency. That gradient is painted on an oversized pseudo-element and then masked with a radial-gradient that is transparent in the middle and opaque at the rim, so only the outer ring survives. The result is a dashed annulus, which reads as a milled coin edge.
Which browsers support this?
All current ones. conic-gradient has been supported everywhere since 2020, and mask-image is universal, though Safari still wants the -webkit-mask form in some cases, which is why the generated CSS includes both. There is no polyfill path for a browser too old for conic-gradient, so use a background image there.
Why do the dashes turn into a grey blur at high counts?
Because each dash gets narrower as the count rises. At 90 dashes on a 200px coin, the dashes are only a few pixels wide at the rim and the display cannot resolve the alternating pattern, so it averages into a solid band. Lower the dash count, or make the coin bigger.
Can I add text or a relief to the coin face?
Not from the tool: the face is a flat colored circle. You can put anything you like inside the element in your own markup, since the ring lives on a pseudo-element and does not interfere with children. Centre a character or an SVG in the face with flexbox.
How do I resize the coin after I have copied the CSS?
Change three numbers together: the width and height on the base class, and the ::before width and height, which are the coin size plus twice the ring thickness. Change only one and the ring will detach from the face. Regenerating at the size you want is less error-prone.
Why use CSS rather than an image?
It is a few hundred bytes, it scales cleanly to any size and any DPI, and both colors and the dash count are variables you can change at runtime. A PNG of the same coin is a network request, a fixed resolution, and a fixed color.