Hide part of a border in CSS?

Question

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.

Is there a way to have the header element cover up the parent element's border AND allow the background image to show through? I can easily set the color to transparent, but nothing I've found will cover the border other than a solid color or image.

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.

Is there a way to do this?

.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; 
}

<div class="panel">
  <span class="panel-header">
    Title Goes Here
    </span>
  <p class="panel-content">Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
  </div>

<hr/>

<div style="background-image: url(http://placekitten.com/510/200); padding: 2em;">
  <div class="panel">
    <span class="panel-header">
      Title Goes Here
      </span>
    <p class="panel-content">Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
    </div>
</div>

Answer 1

First of all you need a container div with a background (I've grabbed a random one from the internet).

After that you can use the <fieldset> and <legend> HTML tags to achieve the desired effect.

div {
  padding: 30px;
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkAuRoZnkLBZlEYtgL5GJ5w_2Tufpxh5PqkOf-Negy7eL-JGC5Mk-DW-I) no-repeat center center;
  background-size: cover;
}

fieldset {
  border: 2px solid black;
  padding: 10px;
}

<div>
  <fieldset>
    <legend>Personalia:</legend>
    <p>some text here</p>
  </fieldset>
</div>

Here you can see the Fiddle