title: Create CSS background image that overlays border?
body: <p>I am having trouble getting a background-image to overlay the border of another div.  We have a sidebar panel with various sidebars, including a navigation menu.  To the right is the content panel.  We'd like anything selected on the sidebar to appear connected to the content panel:</p>
  
  <p><img src="https://imgur.com/8ACzR.jpg" alt="alt text"></p>
  
  <p>In the example above, there is a background image on the Personal Info <code>&lt;li&gt;</code> tag.  I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.  </p>
  
  <p>Here is my CSS for the submenu (selected) and the Content area to the right:</p>
  
  <pre><code>.submenu-item li span{
    padding: 4px 0 4px 16px;
    min-height: 16px;
    border-bottom:0px;
  }
  
  .submenu-item li{
    font-size:12px;
    border: none;
    padding: 0px 0 0px 16px;
  }
  
  .submenu-item span.Active{
    background-image: url(../images/submenu-select.png);
    background-repeat: no-repeat;
  }
  
  #Content {
    margin-left:190px;
    border-left: 1px solid #b0b0b0;
    padding: 20px;
    background: #FFFFFF;
    min-height:600px;
  }
  </code></pre>
  
  <p>Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?  </p>