adjust element position with css

adjust element position with css

I have a ul wrapped in a .box. I have set the bottom border for the .box.
The ul items also have bottom border, I want the li border to place over
the .box border so that the .box border is no more visible. I'm trying to
do that by setting margin-bottom: -1px but doesn't work.
Please see attached image:

Here's what I'm trying:
HTML:
<div class="box">
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</div>
CSS:
.box{
border-bottom: 1px solid blue;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
background: green;
border: 1px solid red;
}
Demo: http://jsfiddle.net/b9H2j/