Css gradient Implement 2 color dashed border-CodePudding

Any ideas how to implement a custom border in css using gradient to look exactly like the following image

CodePudding user response：

Gradients combined with mask can do it:

.box {
  width: 300px;
  height: 200px;
  position: relative;
}
.box:before {
  content:"";
  position: absolute;
  inset:0;
  padding: 4px; /* the border thickness */
  background: 
   repeating-conic-gradient(pink 0 25%,blue 0 50%) /* update the colors here */
   0 0/30px 20px round; /* update the size here (30px = width, 20px = height) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

<div ></div>

CodePudding user response：

Add a dashed border on a solid border.

body {
  background: #ccc;
}
div {
   width: 200px;
   height: 50px;
   border: 2px solid #fff;
   position: relative;
}
div::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed black;
    margin: -2px;
}

<div></div>

CodePudding user response：

Can you place a div within a div such as this: https://jsfiddle.net/sdfpe5w9/

<div >
    <div ></div>
</div>

body {
  background: #999;
}
.outer {
  background: white;
  border: 2px dashed #000;
  display: inline-block;
}
.inner {
  width: 200px;
  height: 100px;
  background: #999;
}