How to style borders of a div in css - html

Question

Could someone help me make an effect like the one in the example below?
I'm trying to put unsuccessful in the responsiveness part ...
The closest I can get was as follows the code below and the image:
.content .card-l {
margin-top: 1vh;
position: relative;
border-top: 2px solid #00ffde;
border-bottom: 2px solid #c9ff04;
border-left: 2px solid #5bff69;
border-right: 2px solid #2a43c1;
}
.content .card-l::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #ba6c0e;
border-bottom: 3px solid #d3cc0b;
border-left: 3px solid #990be6;
border-right: 3px solid #9a1b3b;
}
.content .card-l::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #070400;
border-bottom: 3px solid #ff8f3a;
border-left: 3px solid #1b9fbd;
border-right: 3px solid #d87777;
}
.content .card-l .card-content {
position: relative;
background: #e0bf95;
padding: 30px;
border-top: 2px solid #82f577;
border-bottom: 2px solid #1c1f31;
border-left: 2px solid #d6d254;
border-right: 2px solid #f380de;
}
.content .card-l .card-content::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #18fd03;
border-bottom: 3px solid #34eca3;
border-left: 3px solid #5528e9;
border-right: 3px solid #df2cec;
}
.content .card-l .card-content::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 3px solid #806c53;
}

Answer 1

You can consider multiple background and clip-path like below:
.box {
--c1:#806c53; /* first color */
--c2:#5d4e39; /* second color */
--b:20px; /* border width */
margin:10px;
width:200px;
height:100px;
font-size:25px;
outline:3px solid #321f1a; /* outer border */
border:var(--b) solid transparent;
padding:3px; /* control the inner border */
background:
linear-gradient(#e0bf94 0 0) content-box, /* main background */
linear-gradient(#321f19 0 0) padding-box; /* inner border */
position:relative;
}
/* main border */
.box:before,
.box:after {
content:"";
position:absolute;
z-index:-1;
top:calc(-1*var(--b));
right:calc(-1*var(--b));
bottom:calc(-1*var(--b));
left:calc(-1*var(--b));
background:
linear-gradient(var(--s1,var(--c1)) 0 0) center/calc(100% - var(--b)) calc(100% - var(--b)) no-repeat,
linear-gradient(var(--s2,var(--c2)) 0 0);
}
.box:after {
--s1:var(--c2);
--s2:var(--c1);
clip-path:
polygon(0 0,0 100%,var(--b) calc(100% - var(--b)),
var(--b) var(--b),calc(100% - var(--b)) var(--b),100% 0);
}
<div class="box"> some text here </div>
<div class="box" style="--b:30px;--c1:red;--c2:darkred;width:300px;"> some text here </div>
<div class="box" style="--b:10px;--c1:blue;--c2:darkblue;width:300px;"> some text here </div>

Answer 2

Here is an example using only one div, with no additional containers or spans, taking advantage of box shadow and the :after pseudo element.
.card-1 {
position: relative;
padding: 4rem;
background: #e0bf94;
box-shadow: 0 0 0 2px #321f19; /* outer border */
border: 4px solid;
border-color: #5d4e39 #5d4e39 #806c53 #806c53; /* second border */
z-index: 1;
}
.card-1:after {
content: '';
position: absolute;
left: 0;
right:0;
top: 0;
bottom: 0;
border: 4px solid;
border-color: #806c53 #806c53 #5d4e39 #5d4e39; /* third border */
box-shadow: inset 0 0 0 2px #321f19; /* inner and last border */
z-index: -1;
}
<div class="card-1">Lorem ipsum</div>
And you can also achieve something pretty similar with nothing but box-shadow.
.card-1 {
position: relative;
padding: 4rem;
background: #e0bf94;
border: 4px solid;
border-color: #5d4e39 #5d4e39 #806c53 #806c53;
box-shadow: 0 0 0 2px #321f19,
inset -4px 4px 0 0 #806c53,
inset 4px -4px 0 0 #5d4e39,
inset 0 0 0 6px #321f19;
}
<div class="card-1">Lorem ipsum</div>

Answer 3

here you can find an example
.content {
border: 2px solid #321f19;
}
.card-l {
border-top: 4px solid #5d4e39;
border-right: 4px solid #806c53;
border-bottom: 4px solid #806c53;
border-left: 4px solid #5d4e39;
}
.card-content {
border-top: 4px solid #806c53;
border-right: 4px solid #5d4e39;
border-bottom: 4px solid #5d4e39;
border-left: 4px solid #806c53;
position: relative;
background-color: #e0bf94;
}
.card-content::before {
content: "";
width: calc(100% - 4px); /*remove one border size from the 100%*/
height: calc(100% - 4px); /*remove one border size from the 100%*/
position: absolute;
border: 2px solid #321f19;
}
span {
display: block;
padding: 30px;
text-align: center;
z-index: 1;
}
.btn {
margin: 10px auto;
display: block;
position: relative;
padding: 10px;
}
<div class="content">
<div class="card-l">
<div class="card-content">
<button id="button" class="btn">hello!!!</button>
</div>
</div>
</div>

Answer 4

You can always put multiple divs to contain different borders.
OR
Use border image in css. It'll be an easier approach if you can find the image. More reference here.