[csswg-drafts] [css-borders-4] How should radius-constraining work for bevel, scoop and notch corner-shapes? (#11763)

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

== [css-borders-4] How should radius-constraining work for bevel, scoop and notch corner-shapes? ==
`bevel`, `scoop` and `notch` introduce new interesting issues related to border radius constraining, and not just because we have to avoid the curves overlapping in the center; there are complexities around how the inner curves meet at over-constrained corners.

For example, here's an (almost) fully-constrained `notch` rendering:

```
        .box {
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color: silver;
            border-width: 20px;
            border-color: green;
            border-style: solid;
            corner-shape: notch;
            border-radius: 29%;
        }
```

![Image](https://github.com/user-attachments/assets/b414a517-49b5-45a7-8976-372639091a67)

Bump up the border-radius by a pixel, and the contents disappear:

![Image](https://github.com/user-attachments/assets/6795828d-f16f-4387-9c3b-02747e091bf4)

If we don't do any constraining, then an even larger border-radius like `border-radius: 49%` will result in this:

![Image](https://github.com/user-attachments/assets/f35e82d9-d72e-41c7-b931-c8b7960d4074)

and finally `border-radius: 50%` makes the box disappear entirely.

For `scoop` and `notch` it's less about obscuring the box content, and more about the complexities of the inner joins. Here's a "fully constrained" scoop:

![Image](https://github.com/user-attachments/assets/3d5e4d5f-968a-4b27-b3d5-5ac750de3ebf)

where by "fully constrained" I mean the largest border radius where the inner arcs still meet at the inner border edge. Any more constrained, and arcs from adjacent corners intersect. `bevel` is similar.

However, some over-constrained renderings are desirable; it should be possible to make a sharp-pointed star with `corner-style: scoop; border-radius: 50%`. As an implementor I'm not relishing writing code to deal with inner shape intersections (don't forget that adjacent corners can have different corner-shapes), but it's probably doable. But what do we want?






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


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

Received on Sunday, 23 February 2025 20:28:38 UTC