Techniques, not templates

Squircles in CSS: corner-shape Cuts the Corner

Chromium 139 and up only. Safari and Firefox drop the declaration and keep the border-radius, which is the rounded box you already ship, so the fallback costs nothing. A round corner is a quarter circle: it meets the straight edge at an angle. corner-shape says which curve cuts the corner instead, and squircle keeps curving into the edge, the shape phone home screens have used for a decade. It needs a border-radius to work on, since that is what says how far the corner is cut. Every named value is one point on a single curve: bevel is superellipse(0), round is superellipse(1), squircle is superellipse(2), and negatives scoop the corner inwards. notch and square sit at the two infinities.