[csswg-drafts] [css-borders-4] Support for curve-based profiles to define custom corner shapes (#12954)

777555777 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-borders-4] Support for curve-based profiles to define custom corner shapes ==
Currently, the `corner-shape` property uses a superellipse to define the corners shape. While this is both powerful and intuitive, it is limited in the range of shapes that it can produce.

To increase its flexibility, `corner-shape` could be given the ability to accept a user defined curve as an alternative option to the superellipse.

This idea is already implemented in Blender’s bevel modifier, where custom profiles can be defined through editable curves.

Such an addition would make it possible to create more complex/stylistic shapes such as pixelated or ornament shaped corners without resorting to workarounds like `border-image` or `clip-path` that both come with their limitations or disadvantages.

<img width="1525" height="1130" alt="Image" src="https://github.com/user-attachments/assets/604ff6e5-97d7-4f03-b68e-292ab87b71f4" />

_Example of the feature in Blender_

---

<img width="387" height="325" alt="Image" src="https://github.com/user-attachments/assets/82f0b1a5-e270-4d59-b593-40a037de4c3a" />

<img width="4096" height="1369" alt="Image" src="https://github.com/user-attachments/assets/8d845fdb-78d0-4f2a-a8e1-53d554d22a8f" />

_Pixelated porfile example_

---

<img width="387" height="325" alt="Image" src="https://github.com/user-attachments/assets/e131a3a5-e135-467c-b36d-70797aa57ada" />

<img width="4096" height="1369" alt="Image" src="https://github.com/user-attachments/assets/b9618bbc-b24d-438c-b402-6ba2215b603d" />

_Ornamental profile example_

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12954 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 15 October 2025 21:45:33 UTC