Re: [csswg-drafts] [css-backgrounds] border-radius with a circular edge (#6467)

all this talk of infinity, I think, is leaning into the hack.

This pill shape is created on a horizontal element (lets say `width: 200px;` and `height: 50px;`) when the border-radius of the corners are the pixel equivalent of 50% of the elements height (the value in our example would be 25px).

https://codepen.io/jsnkuhn/pen/ZErOqwL

This creates a situation where the reference circles for the top and bottom corners are fully overlapping. (Note that this is also how we get a circle with `border-radius: 50%;` on a square element because all the reference circles for the corners overlap.)

It needs to be a equal value so that the radius reference is round. If you would do `border-radius: 50%;` in our horizontal example you get 50% of the element width and 50% of the element height which gives you a reference ellipse because the width and height of our element are different. In our example we can do `border-radius: 12.5% / 50%;` to get equal px values for the reference circle.

The problem comes in when the width and the height values are not fixed.

So 9999px works because:

1. it's a pixel value. So it will create a circle.
2. Border-radius must be clamped somehow to deal with unrealistically high numbers

So is what's needed here some sort of element unit? As in border-radius: 50eh;  eh = element height

Also of note: This has implications for `corner-shape` if that ever happens. There's similar situation with `angle/bevel` and `scoop` corners

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


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

Received on Wednesday, 11 May 2022 16:47:43 UTC