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 the level as the main content div, like this http://dribbble.com/shots/663779-Left-navigation

If it matters I am using twitter bootstrap.

Any pointers greatly appreciated!

Edit: here is link to HTML/CSS

View: http://codepen.io/anon/full/Asrnm

Edit http://codepen.io/anon/pen/Asrnm

Answer 1

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 2

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.

Answer 3

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