Re: [csswg-drafts] [css-borders-4] Consider constraining radii for concave corner-shape when opposite corners overlap (#12098)

I actually thought of a third option that has some nice attributes to it: constraint the radius in only one of the dimensions.

For the following CSS:
```css
border-top-right-radius: 70%;
border-bottom-left-radius: 70%;
corner-shape: notch;
```

where the radius in the next clockwise dimension remains unconstrained, and the radius in the counterclockwise dimension is constrained in such a way that the corners do not overlap. See options below for how this is going to look like.

This gives us 3 options. For each one I'll show what CSS it would be equivalent to and how the OP example would look like:

Original:
```css
border-top-right-radius: 70%;
border-bottom-left-radius: 70%;
corner-shape: notch;
```

1. Constrain the radius.
```css
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
corner-shape: notch;
```

![Image](https://github.com/user-attachments/assets/484ec85f-f218-4dd1-9c0b-48ee8685cd17)

2. Constrain the shape
```css
border-top-right-radius: 70%;
border-bottom-left-radius: 70%;
/* 1.02 is some computed number that puts the diagonal half corners in the same point */
corner-shape: superellipse(-1.02);
```
 
![Image](https://github.com/user-attachments/assets/2f6dcbc1-eb68-4d0b-922c-34ddbef1cd97)

3. Constrain the radius in one dimension 
```css
border-top-right-radius: 50% 70%;
border-bottom-left-radius: 50% 70%;
corner-shape: notch;
```
![Image](https://github.com/user-attachments/assets/1ed3af03-bcdc-448d-97c3-04b927d50ebc)


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


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

Received on Tuesday, 6 May 2025 10:31:24 UTC