How do I remove a section of the border on a div to make left nav look seamless with main content section?

Question

I am trying to remove the left border where the active menu item meets right content div.

See http://d.pr/i/hfRZ+

So it appears the active element is the same as

Answer 1

You could have the selected item only have a top and bottom border

.selected-item
{
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

or

.selected-item
{
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-left: 0px;
    border-right: 0px;
}

and to avoid the box shadow escaping the parent container, you could instead replace it with

.selected-item:after
{
    display: block;
    position: absolute;
    height: 10px;
    background: url("gradient.gif") top left repeat-x;
}

that way, you get a consistent horizontal shadow below the element, that goes all the way up to, but not beyond, the parent element and its borders.