CSS tab menu with uniform borders

[cbjewelz]

Hey.
I'm creating a horizontal boxed CSS menu for my site using lists. I wish to achieve a main menu bar something like this:
http://kurafire.net/log/

however when I add borders to my code it adds the borders of each li so I get double thickness borders. I only want 1px so its a problem. here is my code:

<style>
#underlinemenu{
margin: 0;
padding: 0;
display: inline;
}
 
#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
 
}
 
* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}
 
#underlinemenu ul li{
display: inline;
 
}
 
 
#underlinemenu ul li a{
float: left;
color: gray;
font-weight: bold;
padding: 4px;
text-decoration: none;
background: white url('') top right repeat-y;
border: 1px solid black;
border-width: 0 1px;
}
 
#underlinemenu ul li a:hover{
color: black;
background-color: #F3F3F3;
border: 1px solid black;
border-width: 0 1px;
}
 
 
</style>
HTML:
<div id="underlinemenu">
<ul>
<li><a href="" title="Home">Home</a></li>
<li><a href="" title="link 2">Link 2</a></li>
<li><a href="" title="link 3">Link 3</a></li>
<li><a href="" title="Link 4">Link 4</a></li>
</ul>
</div>
 

this gives me this:

is there a way to get uniform 1px borders throughout this menu? thanks

[cbjewelz]

figured it out on my own..just made the left margin -1px.

[Banfa]

An alternitive (an personally I don't like negative numbers in CSS if it can be avoided) would be

border-width: 0 1px 0 0;
border-style: solid;
border-color: black;