title: Hide part of a border in CSS?
body: <p>I have a few simple CSS classes for a panel with a header. It works great when the background is a fixed color because I have to use that color to hide the border behind the header text. However, I now want to have a background image instead of a solid color.</p>
  
  <p><strong>Is there a way to have the header element cover up the parent element's border AND allow the background image to show through?</strong> I can easily set the color to <code>transparent</code>, but nothing I've found will cover the border other than a solid color or image. </p>
  
  <p>I have a hunch it could be done with JS and reusing the image as the background of the header and setting some offsets based on the position on the page, but that seems overly complicated, and won't work for me since I'd like to account for several layered background images forming a pattern, or fixed attachment which would constantly have to be recalculated.</p>
  
  <p>Is there a way to do this?</p>
  
  <p><img src="https://i.stack.imgur.com/ulPrO.png" alt="Good and Bad Examples"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel {
      border: 2px solid #000000;
      padding: 1em;
      margin: 1em;
      display: block;
  }
  
  .panel-header {
      position: relative;
      top: -1.5em;
      background-color: #ffffff;
      padding-left: 0.4em;
      padding-right: 0.4em;
      font-size: 1.2rem;
      font-weight: bold;
  }
  
  .panel-content {
      margin-top: -0.5em; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="panel"&gt;
    &lt;span class="panel-header"&gt;
      Title Goes Here
      &lt;/span&gt;
    &lt;p class="panel-content"&gt;Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;hr/&gt;
  
  &lt;div style="background-image: url(http://placekitten.com/510/200); padding: 2em;"&gt;
    &lt;div class="panel"&gt;
      &lt;span class="panel-header"&gt;
        Title Goes Here
        &lt;/span&gt;
      &lt;p class="panel-content"&gt;Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>