.sample-heading {
  padding: 1em;
  border: 0.25em solid;
  position: relative;

  &::before, &::after {
    content: '';
    display: block;
    position: absolute;
    background: #fff;
  }
  
  &::before {
    top: -0.3em; // let it overlap a bit to prevent thin line which could appear during scaling in some browsers etc.
    bottom: -0.3em;
    left: 1em;
    right: 1em;
  }
  
  &::after{
    left: -0.3em;
    right: -0.3em;
    top: 1em;
    bottom: 1em;
  }
  
  // you need this to move the text in front of the ::after overlay
  .heading {
    position: relative;
    z-index: 1;
  }
}