Search code examples
cssborder

How to create a custom border with a gap?

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?

Solution

  • 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>