title: css :first-visible-child & :last-visible-child
body: <p>i'm making a container with children.
  I need the <strong>first visible child</strong> &amp; <strong>last visible child</strong> have <strong>rounded corners</strong>.</p>
  <p>My approach is using <code>:first-child</code> &amp; <code>:last-child</code> and it works fine.
  But if one/some children have <code>.hidden</code>, the layout seem broken.
  So I need a something similar to <code>:first-visible-child</code> &amp; <code>:last-visible-child</code>,
  of course that selector doesn't exist. I need a <strong>trick/hack</strong> to archive the <strong>similar result</strong>.</p>
  <p>Note: I cannot apply <code>border-radius</code> on the container with <code>overflow: hidden</code> because the child's box-shadow will be clipped out and the children might have <em>a shake transfom effect</em> and I don't want become clipped out.</p>
  <p>Note: a javascript solution are welcome. Maybe using VisibilityObserver() </p>
  <p>Here the illustration:
  <a href="https://i.stack.imgur.com/dJSf8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dJSf8.jpg" alt="enter image description here" /></a></p>