Corner-shape generator
Adjust the sliders until you're happy with how the corners look, then copy the CSS. Two fallback options: default border-radius recomputed for equivalent corner area (different numbers, same look), or exact clip-path curve tracing. Here is the article behind this idea
In depth→
The corner-shape property specifies the curve applied within the corner region defined by border-radius. The value inside superellipse() acts as an exponent (k = 2s): 0 produces a straight bevel, 1 gives you a regular circular curve, 2 matches Apple's iOS squircle, and negative values make the corner curve inward rather than outward. The scale runs out at both ends: below -3 the spec's -infinity takes over as notch, above 5 its infinity takes over as square. Every step doubles k, and the curve flattens so fast toward straight lines that cranking the exponent higher barely moves it (we're talking less than a pixel of difference).
If the newer syntax isn't supported, you can fall back in one of two ways. By default you fall back to good old border-radius, which plays nicely with borders, outlines, and shadows, but it can only round corners outward (no concave curves). The exact fallback uses clip-path to trace the actual curve. It reproduces the shape exactly, but the cut lands on the border box, and anything drawn there loses its corners to it. Corners at least as full as a circle get a rounded border that survives the cut.
For outward-curving corners, the generator calculates a border-radius that removes the same amount of corner area as the superellipse would, so both versions look visually equivalent. Concave curves can't be replicated with border-radius, so the generator just keeps whatever radius you typed and warns you about it. When you're in exact mode with a custom curve, the generator pieces it together from Bézier segments, splitting them over and over until the fit is within 0.25% of the radius. That precision holds for every shape you can dial up, all the way to superellipse(-3).