Как реализовать вертикальные border по краям меню?

Question

[RushV]

Как реализовать вертикальные border по краям в меню сайта?
Вот фото:

Весь интернет перерыл!

Answer 1

[Defman21]

border-left и border-right для first-child и last-child.

Comments

[RushV]

При добавление border-left и border-right появляться вот
joxi.ru/VrwqWd1uKR5ZN2

Answer 2

[root09]

first-child, last-child ?

Answer 3

[Дмитрий]

jsfiddle.net/soledar10/wv5thet3

Answer 4

[Александр]

Я так понимаю, что Вы используете структуру ul > li. Здесь 2 варианта реализации, как подсказывают Вам участники. 1) Для li даете border-left, а для последнего (:last-child) даете еще border-right. 2) Для li даете border-right, а для первого (:first-child) даете еще border-left.

Comments

[RushV]

Подскажите пожалуйста, а как прописать код:
mehu li{
border-left: 1px solid #fff;
}
а это как прописать :last-child

[Александр]

RushV: .menu > li { border-left: 1px solid #fff; } .menu > li:last-child { border-right: 1px solid #fff;} Чтобы понять как это работает, почитайте о комбинаторах и псевдоклассах в CSS

[RushV]

Спасибо большое!