css - borders overlap each other

Question

I am having a problem. My bottom border is "overlapping" my right border on the same element.

This is how it looks like: http://awesomescreenshot.com/0311z2fy84

As you can see, the green right borders bottom, is looking messed up, because of the bottom gray border. How can I fix this?

This is the css:

.side-menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.side-menu li{
    border-bottom: 1px solid #E6E7E9;
    padding: 7px;
    padding-left: 0px !important;
    width: 192px;
}
.side-menu li.active{
    color: #CACDD0;
    border-right: 6px solid #2CC588;
    width: 199px;

} 

Edit: Added jsFiddle: http://jsfiddle.net/wu958/

Answer 1

I assume the <li> elements will have an <a> link inside?

You could add the border right to the <a> elements like so:

HTML

<li class="active"><a href="#">Banners</a></li>

CSS

.side-menu li a {
    padding: 7px;
    display: block;
}
.side-menu li.active a {
    border-right: 6px solid #2CC588;
}

Refer to this JsFiddle which shows a better working example.

Answer 2

try this:

.side-menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.side-menu li{
    border-bottom: 1px solid #E6E7E9;
    padding: 7px;
    padding-left: 0px !important;
    width: 192px;
}
.side-menu li.active {
    color: #a2a7ad;
    border-right: 6px solid #2CC588;
    width: 204px;
}

I simply changed the width of the class. "side-menu li.active" and seems to work.

Answer 3

You can use the ::after pseudo-element to avoid this kind of problems :

.side-menu li{
    line-height: 35px;
    padding-left: 18px !important;
    width: 210px;
    color: #37434f;
}
.side-menu li::after {
    content: ' ';
    display: block; 
    border-bottom: 1px solid #E6E7E9;    
}

Update JSFiddle