Re: [csswg-drafts] [css-shapes-1] Shape() ability to round path corners without having to manually calculate fillets (#12768)

@noamr Sorry for the delay on feedback, but I have now used this a few more times and really do think that an easier solution for rounding arbitrary corners is a must.

I don't think my original proposed solution is the right tool for this anymore. It would make it easier, but still would leave a lot of calculations up to the user for more complex shapes, such as trying to chain multiple of these together.

I think the simplest and most intuitive user solution would be just a single fillet command that can be inserted between two `line/line`, `line/curve`, `curve/curve`, etc commands. This would leave it up to the browser to do all the tangent math (which the other proposal #9843 to define a global radius for ALL corners would utilize the same math).

### Proposed Solution
```
from 0 50px,
curve to 100% 50px with 50% 0,
fillet 15px,
line to 100% 100%
```
<img width="962" height="299" alt="Image" src="https://github.com/user-attachments/assets/e04e97d4-e16d-4c44-8020-9714ad89a69c" />

This would be similar to tools like Illustrator, where you can take two lines, select their corner vertex and drag a radius onto it, instead of having to manually define that curve.

![Image](https://github.com/user-attachments/assets/af9c1419-7dab-494e-a387-61ea304474ac)

## JS Fiddle Example
I just had to make a shape that hard arched top and bottom edges, but I wanted rounded corners as well. To make this responsive was a big challenge and took over an hour plus I used CAD software to help me figure out the control points. 

To make a shape like this responsive where two curves have tangency at an arbitrary angle, the tangent angle and control points both change as it resizes. What looks like a simple shape, is pretty complex to actually implement.

Here is a JS fiddle with the solution. Mathematically, the tangents are not really correct as I simplified some calculations down to make it easier but visually it looks mostly correct.

https://jsfiddle.net/c8rxyuae/

<img width="962" height="335" alt="Image" src="https://github.com/user-attachments/assets/a8843de8-528e-43b3-ade8-a5c4b7e3a329" />

<img width="467" height="468" alt="Image" src="https://github.com/user-attachments/assets/472bfa96-3eb4-42be-b521-7873d51da29b" />






-- 
GitHub Notification of comment by joezappie
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12768#issuecomment-3687291431 using your GitHub account


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

Received on Tuesday, 23 December 2025 16:45:06 UTC