How to create border corner spacing in CSS - css

Question

How can I create border corner spacing with CSS like the picture below? The height of the content is not fixed.

Answer 1

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>

Answer 2

Using border-image:
We can make use of the border-image to assign a linear-gradient as the border image on all the four sides. We would need a pseudo-element (overlapping the parent container) because the gradient can go only in one direction. Gradients can support percentage based values and hence can adapt to different container dimensions. This can be verified by hovering on the div in the snippet.
The main drawback of this approach is that the border-image property has low browser support. But it is pretty useful when only IE11+ need to be supported because unlike box-shadow it doesn't require fixed dimensions, is not as complex as clip-path and also leaves a spare pseudo-element for other potential usage.
.border-spacing{
position: relative;
height: 100px;
width: 300px;
padding: 10px;
background: rgb(187, 103, 224);
background-clip: content-box;
border-image: linear-gradient(to bottom, transparent 25%, black 15%, black 75%, transparent 75%);
border-image-slice: 4;
border-image-width: 4px;
border-image-repeat: round;
/* Just for demo */
text-align: center;
line-height: 100px;
color: white;
}
.border-spacing:after{
position: absolute;
content: '';
top: -2px; /* half of border-image-slice */
left: -2px; /* half of border-image-slice */
height: calc(100% - 20px); /* 100% - 2 * padding */
width: calc(100% - 20px); /* 100% - 2 * padding */
padding: 10px;
border-image: linear-gradient(to right, transparent 25%, black 15%, black 75%, transparent 75%);
border-image-slice: 4;
border-image-width: 4px;
border-image-repeat: round;
}
/* Just for demo */
.border-spacing{
transition: all 1s;
}
.border-spacing:hover{
height: 150px;
width: 450px;
line-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border-spacing">Content div</div>
Using background-image:
We can make use of the background-image to assign a linear-gradient as the border image on all four sides. We would need a pseudo-element (overlapping the parent container) because the gradient can go only in one direction. Gradients can support percentage based values and hence can adapt to different container dimensions. This can be verified by hovering on the div in the snippet.
Drawback of this approach is also very similar to the previous one in the sense the linear-gradient is only supported by IE10+. Advantages are same as mentioned for the earlier one.
.border-spacing{
position: relative;
height: 100px;
width: 300px;
padding: 10px;
background-image: linear-gradient(to bottom, transparent 25%, black 15%, black 75%, transparent 75%), linear-gradient(to bottom, transparent 25%, black 15%, black 75%, transparent 75%), linear-gradient(to right, transparent 25%, black 15%, black 75%, transparent 75%), linear-gradient(to right, transparent 25%, black 15%, black 75%, transparent 75%);
background-size: 4px 100%, 4px 100%, 100% 4px, 100% 4px;
background-position: 0px 0px, 100% 0px, 0px 0px, 0px 100%;
background-repeat: no-repeat;
/* Just for demo */
text-align: center;
line-height: 100px;
color: white;
}
.border-spacing:after{
position: absolute;
content: '';
top: 10px;
left: 10px;
height: calc(100% - 20px);
width: calc(100% - 20px);
z-index: -1;
background: rgb(187, 103, 224);
}
/* Just for demo */
.border-spacing{
transition: all 1s;
}
.border-spacing:hover{
height: 150px;
width: 450px;
line-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border-spacing">Content div</div>

Answer 3

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" :)

Answer 4

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>

Answer 5

Single corner space
Sorry for digging but I've made my own interpretation of #misterManSam solution: I wanted to reach the free space in one corner to place the icon on it in my project.
div {
background: purple;
height: 200px;
width: 200px;
margin: 50px auto;
position: relative;
min-height: 200px; /* Just adjust as you wish */
min-width: 200px; /* Just adjust as you wish */
}
div:before { /* Bottom half Borders */
content: '';
position: absolute;
top: 60px; /* Height of left border */
/* Higher value - smaller border line */
left: -20px; /* Margin between div edge */
right: -20px; /* Margin between div edge */
bottom: -20px; /* Margin between div edge */
border: solid 3px #000;
border-top: none;
}
div:after { /* Top half Borders */
content: '';
position: absolute;
top: -20px; /* Margin between div edge */
left: 60px; /* Height of top border */
/* Higher value - smaller border line */
right: -20px; /* Margin between div edge */
bottom: 60px;
border: solid 3px #000;
border-left: none;
border-bottom: none;
}
HTML
<div></div>
Pure HTML + CSS.
https://codepen.io/nigtellios/pen/LYZevGv