Reports

Just been tackling the same issue - horizontally rather than vertically:

<ul class="list">
    <li class="item">Jan</li>
    <li class="item">Feb</li>
    <li class="item">Mar</li>
    <li class="item active">Apr</li>
    <li class="item">May</li>
    <li class="item active">Jun</li>
    <li class="item active">Jul</li>
    <li class="item active">Aug</li>
    <li class="item">Sep</li>
    <li class="item active">Oct</li>
    <li class="item active">Nov</li>
    <li class="item">Dec</li>
</ul>

/* If element has a sibling immediately after it, remove its right radius */
.item.active:has(+ .item.active) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* and the left radius of the adjacent active siblings in the group  */
.item.active + .item.active {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

merged border-radius of list elements

79786873