Incomplete borders around div

Question

I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve:

<

Answer 1

We can do this with linear-gradients. No SVG, no pseudo-element. I used some variables to control everything easily.

.container {
  /* you can change these variables */
  --border-color: #000;
  --border-width: 2px;
  --space: 100px;
  
  width: 200px;
  height: 300px;
  position: relative;

  background: linear-gradient(var(--border-color), var(--border-color)) 0 0/var(--border-width) 100%, 
              linear-gradient(var(--border-color), var(--border-color)) 0 100%/100% var(--border-width), linear-gradient(var(--border-color), var(--border-color)) 0 0/100% var(--border-width), 
              linear-gradient(var(--border-color), var(--border-color)) 100% 0/var(--border-width) calc(50% - (var(--space) / 2)), 
              linear-gradient(var(--border-color), var(--border-color)) 100% 100%/var(--border-width) calc(50% - (var(--space) / 2));
  background-repeat: no-repeat;
}

.content {
  position: absolute;
  width: 200px;
  top: 50%;
  transform: translateY(-50%);
  right: -100px;
  background: yellow;
}

  

    Lorem ipsum dolor sit, amet consectetur adipisicing elit.