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.

.card {
  border-radius: 24px;
}

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

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.

.card {
  border-radius: 24px;
}

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

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?

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