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

Demo

html

<div class="steps-frame-1">
    <div class="inner">
        <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
        <div class="one">text</div>
        <div class="two">text</div>
        <div class="three">text</div>
        <div class="four">text</div>
    </div>
    <!-- inner -->
</div>

css

body {
    background: black;
}
p {
    color: #ffffff;
    font-size: 16px;
    text-align:center;
    padding:30px;
}
.steps-frame-1 {
    margin-top: 60px;
    width: 50%;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}
.inner {
    position: relative;
    border: 2px solid #fff;
}
.inner div {
    position: absolute;
    height: 30px;
    line-height: 30px;
    width: 50px;
    background: #000;
    color: #fff;
}
.one {
    top: 0;
    bottom: 0;
    margin: auto;
    left: -25px;
    width: 50px;
    text-align: center;
}
.two {
    top: 0;
    bottom: 0;
    margin: auto;
    right: -25px;
    width: 50px;
    text-align: center;
}
.three {
    top: -15px;
    margin: auto;
    left: 25px;
    width: 50px;
    text-align: center;
}
.four {
    bottom: -15px;
    margin: auto;
    right: 25px;
    width: 50px;
    text-align: center;
}

Answer 2

You can use multiple linear-gradient images as background for the parent div container like shown in the below snippet. This is one way to achieve it without adding any extra elements.

The background need not be a solid color. This approach can support transparency. The only thing you would need to make note of here is that since we are using percentages in the linear-gradient, the gap will increase as the height/width increases (and vice-versa). You can see this by using the "Full Page" option.

The transform: translateX(-50%), translateY(-50%) on the text containers are for vertical and horizontal centering of the content within the space.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  position: relative;
  height: 30vw;
  width: 75vw;
  margin: 20px;
  background-image: linear-gradient(to right, beige 5%, transparent 5%, transparent 20%, beige 20%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%);
  background-size: 100% 2px, 2px 100%, 2px 100%;
  background-position: top left, top left, top right;
  background-repeat: no-repeat;
  border-bottom: 2px solid beige;
}
.left-text,
.right-text {
  position: absolute;
  top: 50%;
  height: 20px;
  color: beige;
}
.left-text {
  left: 0%;
  transform: translateX(-50%) translateY(-50%);
}
.right-text {
  right: 0%;
  transform: translateX(50%) translateY(-50%);
}
.top-text {
  position: absolute;
  top: 0%;
  left: 12.5%;
  content: url(http://www.planetcassandra.org/wp-content/uploads/2014/03/GitHub_Logo.png);
  width: 15%;
  transform: translateX(-50%) translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
  </div>
  <div class='top-text'></div>
  <div class='left-text'>Text</div>
  <div class='right-text'>Text</div>
</div>

Answer 3

I doubt there is a native way to cut borders, so you have to give the illusion that it is a border with more containers.

Something like this should suffice. Nothing fancy, so browser support won't be an issue either:

body {
    background: black;
}
p {
    color: #ffffff;
    font-size: 16px;
    text-align:center;
    padding:30px;
}
.steps-frame-1 {
    position: relative;
    margin-top: 60px;
    width: 50%;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}
.borderColour {
     background-color: #fff;   
}
.borderTopLeft {
     position: absolute;
    top:0;
    left: 0;
    width: 10%;
    height:2px;
}
.borderTopRight {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 2px;
    height: 45%;
}
.borderRightBottom {
    position: absolute;
    bottom:0;
    right: 0;
    width: 2px;
    height:45%;
}
.borderLeftTop {
    position: absolute;
    top:0;
    left: 0;
    width: 2px;
    height: 45%;
}
.borderLeftBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 2px;
    height:45%;
}
.borderBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height:2px;
}

<div class="steps-frame-1">
    <div class="borderColour borderTopLeft"></div>
    <div class="borderColour borderTopRight"></div>
    <div class="borderColour borderRightTop"></div>
    <div class="borderColour borderRightBottom"></div>
    <div class="borderColour borderLeftTop"></div>
    <div class="borderColour borderLeftBottom"></div>
    <div class="borderColour borderBottom"></div>
    <div class="inner">
        <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
    </div>
    <!-- inner -->
</div>

http://jsfiddle.net/ddn53xsf/3/

Answer 4

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%;
}

<div class="box">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum finibus ligula sit amet gravida. Sed scelerisque dapibus tempus.</p>
    <p>Curabitur ipsum dui, facilisis at interdum et, feugiat eget tortor. Nunc sodales diam nec nunc sollicitudin, non blandit diam lacinia.</p>
  </div>
  <div class="border border-t"><span><img src="http://lorempixel.com/128/64/abstract/8/"></span></div>
  <div class="border border-b"><span></span></div>
  <div class="border border-l"><span>Integer rhoncus nunc dui, eget.</span></div>
  <div class="border border-r"><span>Curabitur quis mauris eros. In hac habitasse.</span></div>
</div>