Re: [csswg-drafts] [css-backgrounds-3][css-borders-4] The shape of box-shadow should be a circle for a box with border-radius:50% and big spread (#7103)

> > What if we embraced that and made shadow spread behave exactly like outline/stroke
> 
> [@noamr](https://github.com/noamr) Can you clarify what you mean with "outline/stroke"? Is it just the discontinuous algorithm from https://drafts.csswg.org/css-backgrounds-3/radius-expansion ? That is, if the radius is zero keep it zero, otherwise increase it by the spread distance.
> 
> Outer outlines should just follow the same algorithm as outer shadows. Now I'm seeing that it's not the case for Blink, it kept the old discontinuous algorithm for outlines, while it adopted the new one from the spec for shadows and `overflow-clip-margin`. That seems nonsensical, everything should use the same algo.

It's the same in Firefox and Safari. 
What you call "discontinuous" (as far as I understand) is a stroke, which is an old established pattern, and it's how rounded rects are stroked in canvas (which we can't change without breaking compat), and how other shapes that are not necessarily precise rounded rects are stroked:

```html
<canvas id=canvas width=500 height=100></canvas>
<script>
const ctx = canvas.getContext("2d");
ctx.lineWidth = 25;
ctx.roundRect(15,15,450,60,5);
ctx.stroke();
</script>
```

<img width="500" height="100" alt="Image" src="https://github.com/user-attachments/assets/237f9f31-48cf-4b77-a9f8-35b2c3351239" />

It makes sense to me that box-shadow would either follow this pattern (which is basically the old spec) ortry to be an actual awkward shadow ("percentage of the same axis"), but trying to reinvent stroking in a way that is very particular to CSS rounded rectangles and doesn't apply to either canvas or other shaped is likely to reach a dead end.

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


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

Received on Tuesday, 26 August 2025 08:52:15 UTC