how to make any rounded shape way more sexy? (css only)

The problem with computer rounding is its unnaturalness.

If you build a rectangle in the graphical editor, and then add a fillet to it, a circle will simply be entered into its corner.

Because of this, a form arises that does not occur in the real world. To make the bend look natural, the line should change shape gradually.

Ultimately, the researchers found that users liked shapes with smooth curves more than those with sharp lines.

Sharp objects often signal danger. Slight curvature and bulges are characteristic of living organisms.

.squircle { aspect-ratio : 1/1; background: inherit; position: relative; border-radius: 20%; }
.squircle::before, .squircle::after { content: ""; position: absolute; z-index: -1; background: inherit; }
.squircle::before { border-radius: 2%/30%; top: 15%; bottom: 15%; right: -1%; left: -1%; }
.squircle::after { border-radius: 30%/2%; left: 15%; right: 15%; top: -1%; bottom: -1%; }

Just add .squircle class to your element and set width and background of the element.
the only limit is that the element must have a 1/1 ratio