[csswg-drafts] [css-borders-4] Rendering of outset shadow spread with concave 50% corner-shapes (#13037)

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

== [css-borders-4] Rendering of outset shadow spread with concave 50% corner-shapes ==
The current spec for adjusting border-radius assumes that spread behaves like an extended border.
However, when dealing with concave corners that meet each other (50%), this feels a bit strange. 

e.g:
```css
    .target {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 300px;
        box-sizing: border-box;
        corner-shape: superellipse(-0.5) notch scoop bevel;
        border-radius: 50%;
        background: green;
        border: 20px solid purple;
        box-shadow: 0 0 2px 20px orange;
    }
```

<img width="293" height="381" alt="Image" src="https://github.com/user-attachments/assets/cc49b859-fc74-4dfd-8aed-57ef6b3319eb" />

The shadow spread outer path is basically rendered here like a stroke bevel join (or something similar).

This is more pronounced when all the corners are bevel (rhombus):

<img width="272" height="379" alt="Image" src="https://github.com/user-attachments/assets/bf5d9249-0d65-4942-a401-c4a5e985425a" />

Basically the spread extends the edges of the rect, making a rhombus into an octagon of sorts.

This is probably in line with the philosophy of shadow-spread being a stroke of sorts, but I wanted to verify that with everyone.


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


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

Received on Wednesday, 29 October 2025 13:05:51 UTC