csscss-gradients

Css gradient Implement 2 color dashed border

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

enter image description here

Solution

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