Weird CSS behavior - Diagonal border - Why is the border edge not straight?

Question

I want to add a white gap between menu elements but Im encountering a weird problem. See this jfiddle: http://jsfiddle.net/ERYat/1/

Here is the CSS code:

/* a styling */
ul#menu-menu-services a {
    display: block;
    font-size: 20px;
    color: #000;
    text-decoration: none;
    padding: 5px;
    border-bottom: 2px solid #fff;
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: #000;
}
/* li fix */
ul#menu-menu-services li {
    margin: 0;
    padding: 0;
    border: none;

}

/* Sub Menu */
ul#menu-menu-services li ul.sub-menu {
    display: block;
    margin-left: 0px;
}

ul#menu-menu-services li ul.sub-menu li a {
    padding-left: 15px;
    font-size: 14px;
}

I can't figure out why is the border diagonal on the left. Anyone knows?

Answer 1

Borders come together like this:

||
||______
|/______

You should use margin-bottom instead of border-bottom fiddle:

ul#menu-menu-services a {
display: block;
font-family: 'Droid Sans', arial, serif;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
margin-bottom: 2px;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}

And if you need a white line, consider using :after:

ul#menu-menu-services a { position: relative; }
ul#menu-menu-services a:after {
    content: '';
    width: 100%;
    position: absolute;
    height: 2px;
    background: #fff;
    left: 0;
    bottom: -2px;
}

Answer 2

It's because it's drawing the corner of the two borders. Try changing your bottom border to something other than white and you'll see more clearly what it's doing.

To get rid of this effect, you need to get rid of the bottom border.

If you need the gap that the bottom border is currently giving you, you could use padding-bottom or margin-bottom instead.