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

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

== [css-shapes-1] Ability to round path corners without having to manually calculate fillets ==
I'm wondering if there's any plan to support a way to round corners to a given radius without having to manually calculate the start/stop and control points for curves as this gets pretty complicated fast if you're not dealing with right angles.

I think its an **_extremely common_** use case that people just want to define a sharp shape and then round the corners. There's a lot of hacks for this such as using a filter blur on an SVG to create rounded corners. [Take for example this article]( https://css-tricks.com/exploring-the-css-paint-api-rounding-shapes/) describing the methods people currently use to achieve this, often resorting back to JS.

Take for example, two lines intersecting at an arbitrary angle defined by the blue dots. To calculate the fillet, you need to calculate the circle center, then calculate the bisector and then calculate the start and end points of where the circle intersects the line, using the original center point as the control point for the quadratic curve. I've yet to figure this out in CSS but it would be a lot of CSS variables per corner.

![Image](https://github.com/user-attachments/assets/2198d942-dc4b-42c6-82b7-70eea51fb648)

### Demo 
A simpler method that gets a good approximation is to pick the start and end point the radius distance away from the corner pointer along the vector of each line. I'm pretty sure with this technically the radius size does slightly change as the line angle changes. Here's a fiddle showing this with an animation:

https://jsfiddle.net/a6Lc9457/5/


### Proposed Solution
Its pretty easy to get a static shape that looks correct by manually tweaking your arcs. This really becomes more of an issue should you want to start animating any of these paths as then the curve start and end points need to dynamically change.

It would be nice if there was some sort of `fillet-command`, where you could give it another point with a control point and a radius:
```
from 0px 0px,
line to 0px 500px,
to fillet 700px 0px with 200px 500px / 10px,
```

In this example, it would draw the entire line the two intersecting lines, but with a radius of given size at the center point. Having a separate fillet command would make it clear what it does compared to arc or curve.

### Current Spec
I think this is the way the JS [arcTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo ) function works. Maybe I'm misunderstanding the current spec but I don't believe this exists with the current arc or curve commands.

### End Goal
My goal is to create this shape for a header, where on scroll the cutout animates down so the text is on top of a solid background. With the rounded corners this becomes a solvable challenge (though previously impossible without shape!). It would be great if instead I could define the 10 points to draw a sharp shape, then apply a fillet to the corners.

<img width="1447" height="362" alt="Image" src="https://github.com/user-attachments/assets/a5485d53-de6d-4079-9cd1-bdbac74936bd" />

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


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

Received on Wednesday, 10 September 2025 15:49:51 UTC