如何制作不规则的CSS边框

我正在尝试使用CSS:

I'm trying to do this with CSS:

使用白色背景很容易，但是如果它具有背景图像，该怎么办呢?这就是我的意思:

It's easy to do with a white background, but how can I do this layout if it has a background image? This is what I mean:

我实际上是将div绝对定位在另一个内部:

I'm actually absolute positioning a div inside another:

<div class="main-div">
  <div class="main-div-overlay-text">
    SOME TEXT
  </div>
  SOME TEXT HERE
</div>

.main-div {
  position: relative;
  width: 200px;
  height: 150px;
  border: 2px solid white;
}

.main-div-overlay-text {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top:-10px;
}