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?

Because `border-bottom` is set. The left and bottom make a seam on an angle. You might consider using margin. — kalley, Aug 08 '13 at 15:15

score 9 · Accepted Answer · edited Aug 08 '13 at 15:31

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;
}

score 1 · Answer 2 · answered Aug 08 '13 at 15:18

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.

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

2 Answers2