i'm making a container with children. I need the first visible child & last visible child have rounded corners.

My approach is using :first-child & :last-child and it works fine. But if one/some children have .hidden, the layout seem broken. So I need a something similar to :first-visible-child & :last-visible-child, of course that selector doesn't exist. I need a trick/hack to archive the similar result.

Note: I cannot apply border-radius on the container with overflow: hidden because the child's box-shadow will be clipped out and the children might have a shake transfom effect and I don't want become clipped out.

Note: a javascript solution are welcome. Maybe using VisibilityObserver() 🤣

Here the illustration: