CSS边框底部缺少角

Question

I would like to have a long border underneath my menu UL, but the "border-bottom" property on the list items does not work well: http://jsfiddle.net/BjGvp/

#headermenu-left .menu {
    border-bottom: 4px solid #004B8D;
}

The border is interrupted at the corners by -I guess- the border-left and border-right properties not being there?

I can't put it on the <ul> element, because then the line runs too long.

Answer 1

You can put it on the UL if you get rid of the width on it. Remove your last rule and use this:

#headermenu-left {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border-bottom: 4px solid #004B8D;
}

jsFiddle example

Answer 2

The problem, as you suggest, is the missing left and right borders, which have a width, but no color, so this distorts the appearance of the bottom border with the illusion of a missing notch. To solve this you can simply define border-width: 0 for the element, and allow the border-bottom property to override that setting.

Demo .

Answer 3

Unfortunately this is how borders work. Those are the ends of your border-left, and border-right. Here's a work around though, I added a div to the bottom of your list:

(I also removed your width:70%; from your list)

#bluebar {
    position:absolute;
    bottom:0px;
    width:100%;
    height:5px;
    background-color:blue;
}

http://jsfiddle.net/BjGvp/6/