How can I add border radius to the first and last elements with a specific class

Question

I have a calendar and I'm using this library and I want to make sure these borders are filled in.

Tried something here but works only if I select both dates. I want it to work in the hover state as well.

https://codepen.io/garine519/pen/XWVOePO?editors=1111

selected elements have .active class

items hovered within range have .hover-in-range class

when the end date is selected, .hover-in-range class turns into .in-range

Answer 1

You can try this.

.active:first-child {
 border-radius: 50% 0 0 50%
}

.in-range:last-child {
 border-radius: 0 50% 50% 0
}

Answer 2

You can get start active with:

td.cell:not(.in-range) + .active {
    background: red;
}

and end active with:

td.cell.in-range + .active {
    background: #2800ff;
}

I changed the background for example: