Border over borders CSS List

Question

I am facing a problem with edges in a css list (<ul>,<li>). The problem that when I set the left edge with a color and a different thickness, the lower edge of overlapping ends as shown in the screenshot below:

In the picture there to see the right, so here I leave the fiddle to anyone who can give me help in this situation.

http://jsfiddle.net/Igaojsfiddle/T6KrE/31/

#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-bottom:1px solid #999999;
**border-left:10px solid green;**
border-right:1px solid #999999;
height:55px;

}

Answer 1

it is normal, borders reaches each other to the corners.

you may draw your line with box-shadow: http://jsfiddle.net/T6KrE/32/

#contactList > li {
    font-weight: bold;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px  3px -2px gray;;
    background-image: -webkit-linear-gradient(#ededed, #eff0f2);
    background-image: -moz-linear-gradient(#ededed, #eff0f2);
    background-image: -ms-linear-gradient(#ededed, #eff0f2);
    background-image: linear-gradient(#ededed, #eff0f2);

    border-left:10px solid green;
    border-right:1px solid #999999;
    height:55px;
}