How to create border corner spacing in CSS

You can't do it using just border but you can achieve this using after and box-shadows

see more about after and box-shadow

div {
  width: 200px;
  height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 80px;
  background: black;
  left: -10px;
  top: 10px;
  box-shadow: 220px 0 0 0 black;
}
div:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 180px;
  background: black;
  left: 10px;
  top: -10px;
  box-shadow: 0 120px 0 0 black;
}

<div>content div</div>

If you want to use relative height you will have to remove the bottom border or you can use jquery to change the position of the box-shadow

Note:I have given contenteditable to the div so as to see the change when more content is added

div {
  width: 200px;
  min-height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 90%;
  background: black;
  left: -10px;
  top: 5%;
  box-shadow: 220px 0 0 0 black;
}
div:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 90%;
  background: black;
  left: 10px;
  top: -10px;
}

<div contenteditable="true">content div</div>

Edit: This can change the width and height according to your need i got the idea Idea from misterMansam's wonderful answer

div {
  width: 200px;
  min-height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  font-size:30px;
  color:#fff;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 90%;
  left:5%;
  top:0;
  height:110%;
  top:-5%;
  border-top:2px solid black;
  border-bottom:2px solid black;
}
div:before {
  position: absolute;
  content: "";
  width: 110%;
  left:-5%;
  top:0%;
  height:100%;
  border-left:2px solid black;
  border-right:2px solid black;
}

<div contenteditable="true">Content</div>

I admit this approach is insane but - as an experiment - if you support only modern browser and you play a bit^(*) using clip-path property (used to cut off the corners) you could try this:

http://codepen.io/anon/pen/qOBzJO

div {
  width: 300px;
  padding: 10px;
  margin: 50px;
  background: violet;
  background-clip: content-box;
  border: 3px #000 solid;

  clip-path: polygon(0 20%, 10px 20%, 10px 10px, 15% 10px, 15% 0, 
     85% 0, 85% 10px, calc(100% - 10px) 10px, calc(100% - 10px) 20%, 100% 20%, 
     100% 80%, calc(100% - 10px) 80%, calc(100% - 10px) calc(100% - 10px), 
     85% calc(100% - 10px), 85% 100%, 15% 100%, 15% calc(100% - 10px), 
     10px calc(100% - 10px), 10px 85%, 0 85%);

  -webkit-clip-path: polygon(0 20%, 10px 20%, 10px 10px, 15% 10px, 15% 0, 85% 0, 
     85% 10px, -webkit-calc(100% - 10px) 10px, -webkit-calc(100% - 10px) 20%, 
     100% 20%, 100% 80%, -webkit-calc(100% - 10px) 80%, 
     -webkit-calc(100% - 10px) -webkit-calc(100% - 10px), 
     85% -webkit-calc(100% - 10px), 85% 100%, 15% 100%, 15% 
     -webkit-calc(100% - 10px), 10px -webkit-calc(100% - 10px), 10px 85%, 0 85%);

}

Some values are in percentage, that's why vertical lines are shorter in the taller div (this can be solved using fixed values anyway), but as you can see height is not involved in the solution. Another benefit of this approach is the responsiveness (try to stretch the codepen output panel)

^(*): I lied. it's not really only "a bit" :)

Flexible on all four sides

• The :before pseudo element creates the left and right border
• The :after pseudo element creates the top and bottom border
• The spacing of the borders is controlled with top, right, bottom, and left (having both a left and right property stretches the element between them, same as the top and bottom)

The borders will always remain the designated offset distance.

Here is a good way to visualise how the pseudo elements are layed out:

Example

div {
  background: purple;
  height: 50vh;
  width: 50vw;
  margin: 50px auto;
  position: relative;
  min-height: 200px;
  min-width: 200px;
}
div:before,
div:after {
  content: '';
  position: absolute;
  top: 60px;
  left: -20px;
  right: -20px;
  bottom: 60px;
  border: solid 4px #000;
}
div:before {
  border-top: none;
  border-bottom: none;
}
div:after {
  top: -20px;
  left: 60px;
  right: 60px;
  bottom: -20px;
  border-left: none;
  border-right: none;
}

<div></div>