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

I think we all agree about having something easy to use but I can see a lot of cases where this can be tricky. We are talking about padding but what about margin applied to the child element or an inset applied to a positioned element or an element having a width/height equal to, for example, 90% and is centered (we will have 10% of margin that we need to consider)

I can also see the case where the padding is not equal on all the sides so we should think about how the keyword should behave in these cases.

What if instead of defining the value for radius we define a value to get the "distance" between an element and its containing block? 

For example: 1dt (distance top) will be equal to the top distance between the element its containing block. That distance can be a padding, margin or whatever. We all needed such value one day and we use JS to get it (https://api.jquery.com/position/)

knowing such values (they will be 4) we can use them to define the radius like we want

example

```css
.parent {
  border-radius: 24px 24px 0 0;
}
.child {
  border-radius: calc(24px - min(1dl,1dt)) calc(24px - min(1dr,1dt)) 0 0; 
}
```

I know it look a bit complex but the logic is to get the smallest distance between left and top when defined the top-left radius so that even if the padding,margin is not the same we still get a nice radius that match to the parent one

![image](https://user-images.githubusercontent.com/14073250/188949589-9d14fb44-7625-4177-bc67-d593a268e37d.png)

----

I also think such values can be useful in other situations as well.


-- 
GitHub Notification of comment by Afif13
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7707#issuecomment-1239723491 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 18:17:18 UTC