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>