2 color border-right

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;

Answer 2

<style type="text/css">
  ul li {
    border-right: 1px solid black;
    box-shadow: 1px 0px gray;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000');
  }
</style>

Answer 3

try this

http://jsfiddle.net/umzA3/6/

li:after {
content:"";
position:absolute;
z-index:1;
border-right:1px solid black;
display:block;
top:0%;
right:0%;
height:100%;
}

should work in ie8+