CSS3 — как сверстать декоративную линию?

Question

[kamtm]

Здравствуйте!

Ломал сегодня голову над тем, как красиво сверстать декоративную линию в навигации. Скрин меню приложил, нужно сверстать линию между элементами.

Сейчас линия - это фоновая картинка, но что-то мне говорит, что так оставлять нельзя, слишком легкий способ, да и запрос дополнительный.

Html:

<ul class="mainnav">
        <li><a href="/events">События</a></li>
        <li><a href="/site/about-us.html">О проекте</a>
            <ul>
                <li><a href="/site/contact.html">Контакты</a></li>
                <li><a href="/site/we.html">Сотрудники</a></li>
            </ul>
        </li>
    </ul>

Часть кода CSS

.mainnav li {
    margin-top: 4px;
    padding: 9px 15px 8px 10px;
    display: inline-block;
    position: relative;
    background: url(img/mainmenu-line.jpg) no-repeat right -4px
}

ul.mainnav>li:hover {
    background: #0c8b5d
}

Скрин:


Первое, что пришло на ум, box-shadow. Но верстать стал не так давно, получится ли? Потом пробовал добавить тег span и в нем указать два тега: border-left и border-right, может еще есть идеи или опыт верстки подобных линий?

Здесь линия нужна из 2 цветов, этого будет достаточно, чтобы забыть про фоновую картинку.

Спасибо.

Answer 1

[Krickt]

akurganow.ru/2012/07/09/gradiient-dlia-ghranits-bo...
Там все подробно расписано, ваши варианты не подойдут. :)

Answer 2

[Crash]

Думаю, границу лучше задать через border