How to create a triple overlapping border with CSS? - html

Question

I wanted to achieve triple border like below image.
I have tried below solution but, the corners are still looking different. it is not overlapping.
.dtborder {
position: relative;
border: 5px solid red;
height: 500px;
width: 500px;
background: #f8f8f8;
padding: 30px;
}
.dtborder:before {
content: "";
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
border: 5px solid blue;
}
.dtborder:after {
content: "";
position: absolute;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
border: 5px solid green;
}
<div class="dtborder ">This text appears inside a double bracket bordered div where you can control the gap between border lines.</div>
See this : https://jsfiddle.net/kajh1odv/1/

Answer 1

You can consider linear-gradient that you can scale indefinitely to have as many border as you want. It may look complicated but you will see that all the gradient will have the same size (4px) so [100% 4px] for the horizontal ones and [4px 100%] for the vertical ones. Then for the position we remove/add 8px (or any value) each time to offest between each gradient.
.dtborder {
position: relative;
height: 200px;
width: 300px;
background:
/*First border*/
linear-gradient(red,red) 0 100%/100% 4px, /*Bottom*/
linear-gradient(red,red) 0 0/100% 4px , /*Top*/
linear-gradient(red,red) 0 0/4px 100% , /*left*/
linear-gradient(red,red) 100% 0/4px 100%, /*right*/
/*Second border*/
linear-gradient(blue,blue) 0 calc(100% - 8px)/100% 4px ,
linear-gradient(blue,blue) 0 8px/100% 4px,
linear-gradient(blue,blue) 8px 0/4px 100%,
linear-gradient(blue,blue) calc(100% - 8px) 0/4px 100%,
/*third border*/
linear-gradient(green,green) 0 calc(100% - 16px)/100% 4px,
linear-gradient(green,green) 0 16px/100% 4px,
linear-gradient(green,green) 16px 0/4px 100%,
linear-gradient(green,green) calc(100% - 16px) 0/4px 100%;
/*And so on ...*/
background-repeat:no-repeat;
padding: 30px;
}
<div class="dtborder ">This text appears inside a double bracket bordered div where you can control the gap between border lines.</div>
You can optimize the code like this:
.dtborder {
position: relative;
height: 200px;
width: 300px;
background:
/*First border*/
linear-gradient(red,red) 0 100%,
linear-gradient(red,red) 0 0,
linear-gradient(red,red) 0 0,
linear-gradient(red,red) 100% 0,
/*Second border*/
linear-gradient(blue,blue) 0 calc(100% - 8px),
linear-gradient(blue,blue) 8px 0,
linear-gradient(blue,blue) 0 8px,
linear-gradient(blue,blue) calc(100% - 8px) 0,
/*third border*/
linear-gradient(green,green) 0 calc(100% - 16px),
linear-gradient(green,green) 16px 0,
linear-gradient(green,green) 0 16px,
linear-gradient(green,green) calc(100% - 16px) 0;
/*And so on ...*/
background-size:100% 4px,4px 100%;
background-repeat:no-repeat;
padding: 30px;
}
<div class="dtborder ">This text appears inside a double bracket bordered div where you can control the gap between border lines.</div>
And also like this too:
.dtborder {
position: relative;
height: 200px;
width: 300px;
background:
/*First border*/
linear-gradient(red,red) left 0 bottom 0,
linear-gradient(red,red) 0 0,
linear-gradient(red,red) 0 0,
linear-gradient(red,red) right 0 top 0,
/*Second border*/
linear-gradient(blue,blue) left 0 bottom 8px,
linear-gradient(blue,blue) 8px 0,
linear-gradient(blue,blue) 0 8px,
linear-gradient(blue,blue) right 8px top 0,
/*third border*/
linear-gradient(green,green) left 0 bottom 16px,
linear-gradient(green,green) 16px 0,
linear-gradient(green,green) 0 16px,
linear-gradient(green,green) right 16px top 0;
/*And so on ...*/
background-size:100% 4px,4px 100%;
background-repeat:no-repeat;
padding: 30px;
}
<div class="dtborder ">This text appears inside a double bracket bordered div where you can control the gap between border lines.</div>

Answer 2

Here I try to figure out some thing like your image, hope this approach help you..thanks
.dtborder {
position: relative;
border: 5px solid red;
height: 500px;
width: 500px;
background: #f8f8f8;
padding: 30px;
overflow: hidden;
}
.dtborder:before {
content: "";
position: absolute;
top: 5px;
left: 0;
width: 100%;
height: 5px;
background: blue;
}
.dtborder:after {
content: "";
position: absolute;
top: 0;
left: 5px;
width: 5px;
height: 100%;
background: blue;
}
.dtborder_two:before {
content: "";
position: absolute;
top: 0;
right: 5px;
width: 5px;
height: 100%;
background: blue;
}
.dtborder_two:after {
content: "";
position: absolute;
bottom: 5px;
right: 0;
width: 100%;
height: 5px;
background: blue;
}
.dtborder_three:before {
content: "";
position: absolute;
top: 0;
right: 15px;
width: 5px;
height: 100%;
background: #36648b;
}
.dtborder_three:after {
content: "";
position: absolute;
bottom: 15px;
right: 0;
width: 100%;
height: 5px;
background: #36648b;
}
.dtborder_four:before {
content: "";
position: absolute;
top: 15px;
left: 0;
width: 100%;
height: 5px;
background: #36648b;
}
.dtborder_four:after {
content: "";
position: absolute;
top: 0;
left: 15px;
width: 5px;
height: 100%;
background: #36648b;
}
<div class="dtborder">
<div class="dtborder_two">
<div class="dtborder_three">
<div class="dtborder_four">
This text appears inside a double bracket bordered div where you can control the gap between border lines.
</div>
</div>
</div>
</div>