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

You can try this.

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

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

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: