Как лучше сверстать такие бордеры?

Question

[Blondguy]

Каким образом дать элементам такие вертикальные полосы?

Comments

[Atari_es]

Я бы сделала border-right (border-left) и потом через псевдокласс last-child (first-child) убрать лишний бордер

[Ankhena]

.item:not(:last-child) {правый бордер}

[Vladislav]

Ankhena, через + будет чище

[Ankhena]

Vladislav, по какой причине?

[Сергей delphinpro]

Vladislav, не будет. те же яйца, только в профиль. Даже специфичность у селектора будет та же.

[Сергей delphinpro]

ну еще можно их нарисовать градиентами у родителя.

[Vladislav]

Ankhena, сбрасывать последний дочерний элемент, пусть и в отрицании, считается плохим тоном, поэтому следует отталкиваться от первого

[Ankhena]

Vladislav, я не предлагала сбрасывать последний элемент. Внимательно прочитайте селектор.

И нет, чище не будет.

[Blondguy]

Ankhena, спасибо за ответ, но тут еще проблема в том что эти три элемента прижаты паддингами сверху и снизу, и если сделать им бордеры, то они также будут прижаты паддингами, а по макету (видно на скрине) они по высоте полностью занимаю серую область. Как тут быть?

[Ankhena]

Blondguy, на скрине паддинги внутри дочерних, соответственно бордерам это не мешает.

И всегда можно заменить бордер на псевдо любого размера.

[Blondguy]

Ankhena, буду пробовать, благодарю

Answer 1

[Vladislav]

.block + . block  { 
border-left: 1px solid #000;
}

Answer 2

[neuroscript]

Если это три флекс блок, среднему можно добавить стиль с бордерами по сторонам
Но в любом случае и в варианте выше, нужно будет баловаться с исчезновением при адаптации

Comments

[Ankhena]

А если дочерних станет 4? ;)