CODEWITHSUNDEEP
csscss-gradients
mozenge
mozenge

Reputation: 151

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

Upvotes: 2

Views: 273

Answers (3)

Debashish
Debashish

Reputation: 501

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>

Upvotes: 4

b4tch
b4tch

Reputation: 1198

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;
}

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272965

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>

Upvotes: 4

Related Questions