Как сделать такую обводку у списка?

Question

[make_dev]

Добрый день! Как сделать такую обводку у списка?

Если делать с помощью border - то он накладывается и удваивается в соседних элементах.
Как можно еще хитро реализовать?
Еще момент - список динамический - т.е. на разных разрешениях разное количество элементов в этом блоке.

Comments

[roswell]

Хорошо бы увидеть, как именно список реализован сейчас, иначе тема рискует превратиться в угадайку, мол "попробуйте это, ах не подошло, ну тогда это, опять нет, какая досада".

Answer 1

[Maksim Bondarenko]

Если надо именно дивами то можно обернуть еще в один div назначить для него border-top и border-left. Для внутренних div назначить border-right и border-bottom тк внутренние дивы разные по высоте.

Answer 2

[GreatRash]

codepen.io/GreatRash/pen/qqPKOz

Answer 3

[Максим Тимофеев]

что бы не накладывалась надо перекрыть. Сделав отрицательный margin размером с толщину border

Comments

[Ivan Stroykin]

А лучше не лепить костыли )

[Максим Тимофеев]

Иван Стройкин: это не костыль. Знаете более изящное решение, пожалуйста. Наверняка есть. Ждем Вашего преедложения