Post

Playing with shape() and border-shape 👀 Cool demos in progress ⌛

I’m curious how border-shape interacts with container query units. Both in how using the units in the shape declaration reacts, and how the border shaped element being a container has its children using container query units react.

CSS by T. Afif

@css-only.dev

You cannot use container query units on the element being a container. And there is nothing special with border-shape, it behave almost the same as clip-path.

22/2/26, 8:10 pm0 reposts1 like

Greg Potter

@gregpotter.me

22 Feb

For clarity: if the element that has a container-shape is a child of a container element, can you use container query units in the shape declaration for the container-shape?

CSS by T. Afif

@css-only.dev

22 Feb

Yes you can in that case and they will behave like length but will somehow have a similar behavior to percentage (if the container is resized, they get updated, and the shape will update as well)

Greg Potter

@gregpotter.me

22 Feb

I let some of the source of my puzzlement show there by calling it “container-shape” instead of “border-shaped”. 😅