[csswg-drafts] New `border-radius` value for perfectly matching nested radii (#7707)

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

== New `border-radius` value for perfectly matching nested radii ==
### The Problem:
The majority of implementations where nested border radius are used; are asymmetrical and imperfect. The imperfect solution is easy to do, while the perfect solution is harder.

```css
.card {
  border-radius: 24px;
}

.card picture {
  border-radius: 24px 24px 0 0;
}
```

<img width="377" alt="Screen Shot 2022-09-07 at 9 15 06 AM" src="https://user-images.githubusercontent.com/1134620/188928477-9b462dd7-b5fd-4141-968d-857c6d418db3.png">

<br>

### Proposed Solution:
A new `border-radius` value for nested elements, making symmetrical and perfectly matching nested radii easy. The math is handled by the browser when the keyword is used: `parent-radius - parent-padding`.

```css
.card {
  border-radius: 24px;
}

.card picture {
  border-radius: match-nearest-parent match-nearest-parent 0 0;
}
```

<img width="376" alt="Screen Shot 2022-09-07 at 9 15 11 AM" src="https://user-images.githubusercontent.com/1134620/188928638-edbcdfff-8812-4426-8b5b-69f816065526.png">

### Corners compared
Below is a focused screenshot of the corners for comparison. The border radius on the left has a wobble to it, as the curves don't match. The border radius on the right does match and follows the same curve for a nice perfect finish. Which do you want in your design?

<img width="192" alt="Screen Shot 2022-09-07 at 9 11 25 AM" src="https://user-images.githubusercontent.com/1134620/188928131-74bfa790-f31d-49c8-95b9-5567af367b51.png">

### Conclusion

While it's relatively trivial to do the math inside `calc()` with custom properties passed down to children, it's not easy or intuitive. By adding an additional border-radius value that does the effect easily, we'll see better designs because the nice choice is easy and built-in. 

**Demo source:** 
https://codepen.io/argyleink/pen/LYmpqMB



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


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

Received on Wednesday, 7 September 2022 16:28:46 UTC