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

Answer 1

I think this is a more useable version, that only requires one extra div and will be transferable to almost any image. Plus and this is a big plus, no extra image section would be required. It's reusable!

.panel-wrapper {
    overflow: hidden;
}

.panel {
    border: 2px solid #000000;
    border-top: 0;
    padding: 1em;
    margin: 1em 0 0;
}

.panel-header {
    position: relative;
    top: -1.5em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    font-size: 1.2rem;
    font-weight: bold;
}
.panel-header:before,
.panel-header:after {
    content: "";
    position: absolute;
    height: 2px;
    background: #000;
    top: 50%;
}
.panel-header:before {
    width: 100px;
    left: -100px;
}
.panel-header:after {
    width: 1000px;
    right: -1000px;
}
.panel-content {
    margin-top: -0.5em; 
}

    

  

    
      Title Goes Here
      
    
Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.
    
    



    

  

    
      Title Goes Here
      
    
Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.