20px
20%
.squircle

🧼 Squircles!

I love squircles, I think they look rad. They give a friendliness that can't quite be replicated with the standard CSS border radius. Nonetheless they're possible in CSS and with a Utility CSS mentality and some SVG finesse, they're not too difficult to implement.

Simeon Griggs has a wonderful post on how to make them in CSS. I figured clip-path was the crucial part of the puzzle, yet I didn't want to deal with figuring out how it works and what's needed to get it going, thank goodness Simeon wrote his lovely post to explain how it works, and how to get it working!