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

.selected-item {
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0px
}

Answer 2

I've slapped together a demo: http://dabblet.com/gist/3762742

Used :after with 1px width and background-color of parent to overlap the right-box's border.

Answer 3

You can't partially remove borders, you can only cover them up. You need to make the selected item overlap the border (or have a script that places another element over the border).

Answer 4

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.