Okay so i want a diagonal border to the right of each item on my list. I created a list style image for this and am wondering if its possible to do this using css. I've looked and haven't found anything for this. So, I'm trying to get this accomplished using a list-style-image.


I know I still need to align it but I can't even get it to appear.

CSS

#MainNav ul{
list-style-type:none;
display:inline;



}


#MainNav ul li{
color:#999999;
display:inline;
font-size:16px;
font-weight:100;
margin-right:25px;
line-height:100%;
list-style-image:url(IMAGES/slantedLine.png);
list-style-positionutside;

}





#MainNav ul li a{
text-decoration:none;
color:#999999;
display:inline;
padding:15px 15px;



}


HTML

<div id="MainNav">

<ul>
<li><a href="Tools.html" title="Tools" target="_self">Tools</a></li>
<li><a href="Tools.html" title="Tools" target="_self">About</a></li>
<li><a href="Tools.html" title="Tools" target="_self">Pricing</a></li>
<li><a href="Tools.html" title="Tools" target="_self">Contact us</a></li>
</ul>

</div>