How to add border to a container with transparent gaps in between

Question

Here is an image of the design which I am trying to achieve with only CSS.

Answer 1

Here is my solution:

• Add one helper element on each side of the box.
• Place the logo/text inside the helper element.
• Use pseudo elements to add horizontal/vertical lines before and after the logo/text

body {
  color: white;
  background: black;
}
.box {
  position: relative;
  margin: 100px auto 0;
  padding: 80px;
  width: 50%;
}
/**** border helpers ****/
.border {
  position: absolute;
  background-color: rgba(255, 255, 255, .5);
  /* disable these rules to understand what is going on */
  background-color: transparent;
  overflow: hidden;
}
.border-t,
.border-b {
  left: 32px;
  right: 32px;
  height: 64px;
}
.border-t {
  top: 0;
}
.border-b {
  bottom: 0;
}
.border-l,
.border-r {
  top: 32px;
  bottom: 32px;
  width: 64px;
}
.border-l {
  left: 0;
}
.border-r {
  right: 0;
}
/**** logo and text ****/
.border > span {
  position: absolute;
  text-align: center;
}
.border-t span,
.border-b span {
  top: 0;
  left: 10%;
  height: 100%;
}
.border-l span,
.border-r span {
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
/**** lines ****/
.border span::before,
.border span::after {
  content: "";
  position: absolute;
}
/**** lines (horizontal) ****/
.border-t span::before,
.border-b span::before,
.border-t span::after,
.border-b span::after {
  top: 50%;
  border-top: 1px solid white;
  width: 999px;
}
.border-t span::before,
.border-b span::before {
  right: 100%;
}
.border-t span::after,
.border-b span::after {
  left: 100%;
}
/**** lines (vertical) ****/
.border-l span::before,
.border-r span::before,
.border-l span::after,
.border-r span::after {
  left: 50%;
  border-left: 1px solid white;
  height: 999px;
}
.border-l span::before,
.border-r span::before {
  bottom: 100%;
}
.border-l span::after,
.border-r span::after {
  top: 100%;
}

  

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum finibus ligula sit amet gravida. Sed scelerisque dapibus tempus.
    
Curabitur ipsum dui, facilisis at interdum et, feugiat eget tortor. Nunc sodales diam nec nunc sollicitudin, non blandit diam lacinia.
  
  

  

  
Integer rhoncus nunc dui, eget.
  
Curabitur quis mauris eros. In hac habitasse.