iOS-like Squircle with Tailwind

ios-like-squircle.css

/* Figma squircle G2 path — smoothing=0.6, bezier→arc→bezier per corner
 * p=1.6r, coefficients: 1.04r, 0.76r, 0.546r, 0.109r (from Figma blog) */
@utility rounded {
  --r: var(--radius-md);
  @apply border-shape-squircle;
}
@utility rounded-* {
  --r: --value(--radius-*, [length], [*]);
  @apply border-shape-squircle;
}

@utility border-shape-squircle {
  border-shape: shape(
    from calc(1.6 * var(--r)) 0,
    hline to calc(100% - 1.6 * var(--r)),
    curve to calc(100% - 0.546 * var(--r)) calc(0.109 * var(--r)) with calc(100% - 1.04 * var(--r)) 0 /
      calc(100% - 0.76 * var(--r)) 0,
    arc to calc(100% - 0.109 * var(--r)) calc(0.546 * var(--r)) of var(--r) cw,
    curve to 100% calc(1.6 * var(--r)) with 100% calc(0.76 * var(--r)) / 100% calc(1.04 * var(--r)),
    vline to calc(100% - 1.6 * var(--r)),
    curve to calc(100% - 0.109 * var(--r)) calc(100% - 0.546 * var(--r)) with 100% calc(100% - 1.04 * var(--r)) / 100%
      calc(100% - 0.76 * var(--r)),
    arc to calc(100% - 0.546 * var(--r)) calc(100% - 0.109 * var(--r)) of var(--r) cw,
    curve to calc(100% - 1.6 * var(--r)) 100% with calc(100% - 1.04 * var(--r)) 100% / calc(100% - 0.76 * var(--r)) 100%,
    hline to calc(1.6 * var(--r)),
    curve to calc(0.546 * var(--r)) calc(100% - 0.109 * var(--r)) with calc(1.04 * var(--r)) 100% /
      calc(0.76 * var(--r)) 100%,
    arc to calc(0.109 * var(--r)) calc(100% - 0.546 * var(--r)) of var(--r) cw,
    curve to 0 calc(100% - 1.6 * var(--r)) with 0 calc(100% - 0.76 * var(--r)) / 0 calc(100% - 1.04 * var(--r)),
    vline to calc(1.6 * var(--r)),
    curve to calc(0.109 * var(--r)) calc(0.546 * var(--r)) with 0 calc(1.04 * var(--r)) / 0 calc(0.76 * var(--r)),
    arc to calc(0.546 * var(--r)) calc(0.109 * var(--r)) of var(--r) cw,
    curve to calc(1.6 * var(--r)) 0 with calc(0.76 * var(--r)) 0 / calc(1.04 * var(--r)) 0
  );
}

@utility border-shape-initial {
  border-shape: none !important;
  corner-shape: round !important;
}

/* Pills/capsules should stay truly round, and defining this as a utility also fixes `rounded-full!`. */
@utility rounded-full {
  @apply border-shape-initial;
}