How to create a custom border with a gap?

Question

I need to create a top border around a top that leaves a partial gap. Something such as:

 ____________________________    (gap)      __________________________
|                                                                     |
|                                                                     |

The gap I'm trying to create is on the TOP (ignore the ones on the side, that's just to emphasize it's a div). The gap may or may not be perfectly centered -- in other words, it may vary where the gap exists.

Is it possible to do this with css?

Answer 1

The accepted answer has one flaw, if one want the gap to be "transparent" on top of its background, it won't work if the background is not a solid color.

So to do it on any background, like images, gradient etc., use both pseudo elements, like this:

By altering each pseudo element's width one control both where the gap will be, and its size.

body {
  background-image: linear-gradient(to right, orange , yellow);
}
div {
  position: relative;
  width: 80%;
  left: 10%;
  top: 45vh;
  transform: translateY(-50%);
  height: 80px;
  border: 1px solid black;
  border-top: none;
}
div::before, div::after {
  content: '';
  position: absolute;
  top: 0;
  height: 1px;
  background: black;
}
div::before {
  left: 0;
  width: 20%;
}
div::after {
  right: 0;
  width: 60%;
}

<div>
</div>

And for anyone who need at text in the gap, here's how-to.

body {
  background-image: linear-gradient(to right, orange , yellow);
}
div {
  position: relative;
  width: 80%;
  left: 10%;
  top: 45vh;
  transform: translateY(-50%);
  height: 80px;
  border: 1px solid black;
  border-top: none;
}
div::before, div::after {
  content: '';
  position: absolute;
  top: 0;
  height: 1px;
  background: black;
}
div::before {
  left: 0;
  width: 20%;
}
div::after {
  right: 0;
  width: 60%;
}

div span {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  text-align: center;
}
div span {
  left: 20%;
}
div span {
  right: 60%;
}

<div><span>Hello</span></div>