Post

Greg Potter
@gregpotter.me

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.

Greg Potter
@gregpotter.me

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

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

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

Dean Leigh
@deanleigh.bsky.social

Back in the day we used to have to do that by chopping up gifs and putting them in the outer cells of a table. And before tables we just used the glue string to our CRT monitors.