How to create a custom border with a gap? - css

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

You can use a pseudo element absolutely positioned in your container with a background color that matches whatever the background of your page is.
div {
height: 100px;
border: 1px solid black;
position: relative;
}
div:after {
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
content: '';
background: #fff;
width: 100px;
height: 1px;
}
<div></div>

Answer 2

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>