[css-borders-4] add "radius/corner-smoothing" option to `border-radius` for squircles/superellipse

[jsnkuhn]

https://drafts.csswg.org/css-borders-4/

Idea here is to add sqircles/superellipse as a option for border-radius or a separate property maybe "radius-smoothing" instead of including squircle as a shape option for "corner-shape".

Gives the benefit of being able to be used with corner-shape later to round the corner joints.

round would no longer need to be an option for corner-shape.

This would more closely line up with how vector software and iOS already approach squircles/superellipses

---

Figma's radius-smoothing https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing https://www.youtube.com/watch?v=52pPP4HjieM

Has fine grained control over the smoothing. Also points out that 60 is the corner smoothing value used by iOS.

Swift UI uses "continuous" as a keyword for this: https://developer.apple.com/documentation/swiftui/roundedcornerstyle/continuous

Looks like this is an all or nothing thing in Swift UI. So either all corners are squircle or none are, no ability to mix. (Honestly not sure that I've ever seen an example of say a top right squircle and a bottom left straight round corner though so probably fine?)

Also looks like "continuous" is a binary keyword with no abiity to control the amount of smoothing. Not sure if that would be desirable?

If the main point of squircles in CSS is for things to better line up with SwiftUI's iOS styling than maybe this isn't an issues. Although maybe they change this in the future??

Saw a comment in a YouTube video that said "continuous" might now be the default styling for cornerRadius? Would need to be confirmed.

---

Worth looking into what other vector drawing software might call this. 2 article deepdives:

On a plug-in for adobe illustrator: https://bootcamp.uxdesign.cc/smooth-corner-rounding-in-adobe-illustrator-94003145a7bf

On implementing smoothing in figma: https://www.figma.com/blog/desperately-seeking-squircles/

[smfr]

Dup of https://github.com/w3c/csswg-drafts/issues/6296 ?

[jsnkuhn]

This is an alternate proposal to add the smoothing behavior of squircles as an option to the border-radius property. And therefore not having to add squircle as a keyword to corner-shape which is the purpose of #6296

[didier]

This would make the web feel so much nicer! Consider this my vote.

[mohsen1]

Somehow related: I tried implementing this with clip-path or image-mask + container queries. Given that I can get width and height of the element using container queries (100cqw and 100cqh) I could potentially compute the path() function's value using a bunch of CSS calc() calculations using width, height and border-radius values. The math to get the Bézier curve is nothing impossible to do with existing CSS functions (sqrt(), sin(), etc)

However:

• path does not support CSS variables in its value
• url (for image-mask`) also does not support CSS variables in the value.

I understand that the value inside of the url() is not computed (for security reasons perhaps?) but would it be possible to let users use CSS variables inside of the path() function? This will unlock almost any shape (dynamically computed) rather than this very specific use-case.

[smfr]

You're asking for the shape() function.