Estoy haciendo un contenedor con niños. Necesito que el primer niño visible y el último niño visible tengan esquinas redondeadas .

Mi enfoque es usar :first-child & :last-child y funciona bien. Pero si uno/algunos niños tienen .hidden , el diseño parece roto. Entonces necesito algo similar a :first-visible-child & :last-visible-child , por supuesto, ese selector no existe. Necesito un truco/truco para archivar un resultado similar .

Nota: No puedo aplicar border-radius en el contenedor con overflow: hidden porque la sombra del cuadro del niño se recortará y los niños podrían tener un efecto de transformación de sacudidas y no quiero que se recorte.

Nota: una solución javascript es bienvenida. Tal vez usando VisibilityObserver() 🤣

Aquí la ilustración: