Css gradient Implement 2 color dashed border

Question

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

Answer 1

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>

Answer 2

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 class="box"></div>

Answer 3

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

<div class="outer">
    <div class="inner"></div>
</div>

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