[css-backgrounds] Add support for squircle and superellipse to corner-shape

[simevidas]

The corner-shape property is currently defined in the Backgrounds 4 module.

I’m posting this issue so that folks who want a simple way in CSS to make a box in the shape of a squircle or superellipse* can find this issue and upvote it.

The idea to add this feature to the corner-shape property was suggested by @AmeliaBR on Twitter.

squircle.mp4

---

*For more information, see Pavel Laptev’s article “Squircles on the Web — Houdini to the rescue.”

[Lorp]

How about allowing cubic-bezier() as an alternative to round? Syntax would be the same as in animation-timing-function, and it would be scaled and flipped appropriately for each corner.

[mikkorantalainen]

I think adding keyword superellipsis to property corner-shape would make a lot of sense. The visual difference between the default round and superellipsis would be small enough that there would be nice gradual take-off unlike with more complex corner shapes. In addition, having explicit support for superellipsis would allow keeping the author CSS simpler and browser engines could have special high-performance code path for the superellipsis.

I would expect that most authors would use corner-shape: superellipsis for most rectangular elements with rounded corners and corner-shape: round for elements that need to match with actual circles. I think the superellipsis should automatically use aspect ratio where the difference over the whole curve is minimal compared to round. Another option would be to make superellipsis(ratio) function but in that case, the suggestion about cubic-bezier() is already close enough in complexity.

The use cases for more complex corner shapes are rare enough so there isn't need for such clean solutions there and the authors can be expected to use more verbose syntax such as SVG paths for every corner.