How to style borders of a div in css

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 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 3

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"><a href="#">Lorem ipsum</a></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 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 .