Объединены ли элементы списка с радиусом границы 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