How to make a custom CSS border with border-image?

I am trying but failing miserably on trying to make a custom css border like this using the border-image shorthand property.Is there a way to do partial borders? Maybe there is a better way to achieve what I am trying to do? I could always just insert this image but it doesn't seem like this would resize well once you do that.

We can also achieve this by directly positioning the content inside the container as below.

Here we have positioned the content using margin, we can also do this by absolutely positioning the content.

.container {
  border: 5px solid #000;
  border-bottom: 0;
  height: 10px;
  margin-top: 15px;
}
.content {
  background: #fff;
  text-align: center;
  border-left: 5px solid #000;
  border-right: 5px solid #000;
  height: 25px;
  line-height: 25px;
  width: 150px;
  margin: -15px auto 0; /* height 25px + 5px border = 30/2 = 15 */
}

<div class="container">
  <div class="content">Header</div>
</div>