Объединены ли элементы списка с радиусом границы CSS, если они находятся рядом друг с другом? ⇐ CSS

[Anonymous]

Я создаю веб-приложение (побочный проект!), стараюсь, чтобы оно выглядело хорошо, и столкнулся с небольшой проблемой CSS, можете мне помочь?
Примеры, потому что с изображениями проще:
Пример 1
Что я получаю:


Что я хочу:


Пример 2
Что я получаю:


Что я хочу:


Здесь я разместил очень простой пример VueJs: https://jsfiddle.net/ep8ny04d/3/

Код: Выделить всё

li {
margin: 0;
padding: 10px;
border-radius: 10px;
cursor: pointer;
&.active {
background: #39a374;
color: white;
}
}

(Мои скриншоты взяты из этого примера.)
Итак, проблема в следующем: два элемента должны быть склеены вместе, но радиус границы элементов должен быть изменен (или удален для элементов в середине), если два или более элемента выбраны и расположены рядом друг с другом.
Как вы думаете, можно ли обойтись без этого? JavaScript?

Подробнее здесь: https://stackoverflow.com/questions/577 ... each-other