[superzamp]

I can finally put some words on this. Tangentially (no pun intended) in CSS, the poor rendering you get out of an ambitiously border-radius'ed button has been driving me mad for years; time to get down the rabbit hole to see how to replicate that look on the web.

[metadat]

I had the exact same thought: How to do this in CSS?

Please follow-up on this thread with any discoveries or learnings, would be interesting and cool to learn how to replicate the nice soft curve for web assets. Depending on how many different semi-reasonable approaches exist, this subject and analysis would also make for a compelling and blog article.

Edit: Thank you Charles - wow you're so quick to have unearthed and replied with squircle resources in the time it took for me to compose the three sentences above.

p.s. CharlesW: thanks for your helpful and informative comments in general, I consistently look forward to reading your comments whenever I see one. Cheers and happy holidays!

[kitsunesoba]

It's not CSS, but for cases where it makes sense to export assets (e.g. SVGs or PNGs) Sketch has squircles as an option for corner curvature on roundrects, calling it "smooth corners" (v.s. "round corners"). As far as I can see Figma does not offer this, but I am not well versed in Figma so the option may just be hiding in some obscure panel.

[CharlesW]

I really appreciate the kind words. Happy holidays to you and yours!

[CharlesW]

This looks like a good place to start…

App: https://squircley.app/ Code: https://dev.to/georgedoescode/codepen-soften-up-your-designs...

[davidbarker]

This blog post is from 5 years ago, but it explains how you can use CSS Houdini to make smooth corners. It's quite a lot of work, though.

https://iamvdo.me/en/blog/smooth-corners-with-css-houdini

I would love it to be built into browsers as standard.

[somat]

So web 2.0 was basically css border-radius right, so what we need for web 3.0 to emerge is border-bezier