Question

I would like to create a two-color border-right in li-element navigation, without JavaScript, extra div’s and compatible with at least IE8. So every navigation item would have a black and grey right borders.

The image above is from one of my breakpoints. Currently I am using border-left and -right. This doesn’t achive the wanted result, as I cannot control the floated items after they stack in rows + other problems.

<nav>
    <ul>
        <li><a href="">NHL Home</a></li>
        <li><a href="">Seasons</a></li>
        <li><a href="">Teams</a></li>
        <li><a href="">Records</a></li>
        <li><a href="">Players</a></li>
        <li><a href="">Player origins</a></li>
        <li><a href="">Player age maps</a></li>
        <li><a href="">Analysis</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

How can I achieve this?

Answer 1

First of all, add this CSS rule:

nav ul li {
    box-sizing:border-box;
}

It makes the browser consider borders and padding within the total width of the object.
Then you can add borders:

border-left:1px solid #CCC;
border-right:1px solid #000;