4 ms·

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 d

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.

CharlesW 4y ago
This looks like a good place to start… App: https://squircley.app/ https://squircley.app/ Code: https://dev.to/georgedoescode/codepen-soften-up-your-designs-with-a-squircle-3nd3 https://dev.to/georgedoescode/codepen-soften-up-your-designs...
metadat 4y ago
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!
- CharlesW 4y ago
  I really appreciate the kind words. Happy holidays to you and yours!
- kitsunesoba 4y ago
  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.
davidbarker 4y ago
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 https://iamvdo.me/en/blog/smooth-corners-with-css-houdini I would love it to be built into browsers as standard.
somat 4y ago
So web 2.0 was basically css border-radius right, so what we need for web 3.0 to emerge is border-bezier

CharlesW 4y ago

This looks like a good place to start… App: https://squircley.app/ https://squircley.app/ Code: https://dev.to/georgedoescode/codepen-soften-up-your-designs-with-a-squircle-3nd3 https://dev.to/georgedoescode/codepen-soften-up-your-designs...

metadat 4y ago

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!

CharlesW 4y ago
I really appreciate the kind words. Happy holidays to you and yours!
kitsunesoba 4y ago
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.

davidbarker 4y ago

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 https://iamvdo.me/en/blog/smooth-corners-with-css-houdini I would love it to be built into browsers as standard.

somat 4y ago

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