How to create a dashed border with two alternating colours?

Question

Is there a way to create a dashed border with two alternating colours in CSS?

.twoColourBorder {
  border: 2px dashed red, blue;
}

Edit 1

Perhaps stacked dashed borders (white, red, white, blue)?

Edit 2

Ideally not; however, should I consider a border img?

Edit 3

Leaning toward a gradient solution. Still struggling though.

Edit 4

Dylan pointed out below that perhaps stroke-dasharray could work. On it.

lastr2d2 · Accepted Answer · 2021-05-19T05:33:34.537

Built on Yadab's answer, adding a pseudo element to fix the vertical border.

Basically you create a line with repeating-linear-gradient and set it to border-image.

:root {
  --border-size: 2px;
  --box-width: 36em;
  --box-height: 8em;
  --dash-size: 1em;
}

.box,
.box::after {
  height: var(--box-height);
  width: var(--box-width);
  border: solid;
}

.box {
  border-image: repeating-linear-gradient( to right, red 0, red var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) * 2), blue calc(var(--dash-size) * 2), blue calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 4));
  border-image-slice: 16;
  border-image-width: var(--border-size) 0;
}

.box::after {
  content: "";
  top: 0;
  position: absolute;
  border-image: repeating-linear-gradient( to bottom, blue 0, blue  var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) * 2), red calc(var(--dash-size) * 2), red calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 4));
  border-image-slice: 16;
  border-image-width: 0 var(--border-size);
}

<div class="box"></div>

This is getting close. Any way to avoid red-blue-blue-red in corners? Swap vertical colours around? — Jordy, May 19 '21 at 05:23
edited. it can be done by swap the color stops in the gradient function. — lastr2d2, May 19 '21 at 05:27

score 2 · Answer 2 · answered May 19 '21 at 03:42

2

.boxborder-me {
  box-shadow: 0 0 0 5px red;
  outline: dashed 5px blue;
  height: 100px;
}

<div class="boxborder-me"></div>

answered May 19 '21 at 03:42

Wang Liang

4,244
6
22
45

Close, but no cigar. Managed to achieve this too. however, I wish to have withe spaces in between the colours. 'white - red - white - blue' instead of 'red-blue-red-blue'. – Jordy May 19 '21 at 03:46

score 2 · Answer 3 · answered May 19 '21 at 03:52

This should help you.

.box {
    padding: 1rem;
    border: 5px solid transparent;
    border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
                  #58a 0, #58a 3em, transparent 0, transparent 4em);
    
    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;
}

<div class="box" />

Dylan Anlezark · Answer 4 · 2021-05-19T04:50:41.573

1

I know it isn't perfect and a better answer most definitely exists! (I am strapped for time to answer this) Treat this more a proof of concept that you can get the look your after by using the following:

#multiColor {
 height: 100px;
 width: 340px;

 border: solid 5px;
 border-image: url('../../../assets/images/border.png') 10 / 10px round;
}

Here is the image I edited in photoshop:

EDIT After more research I started researching svg stroke-dasharray and have come up with something that might help us get to a final solution: https://jsfiddle.net/wtcmpx98/52/

<svg viewbox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect class="red"/>
  <rect class="blue"/>
  <rect class="white"/>
  <!--<rect class="white-2"/>-->
</svg>


svg {
 top: 10px;
 left: 10px;

 fill: none;
 width: 500px;
 height: 500px;
}

.red,
.blue,
.white {
 x: 10px;
 y: 10px;

 height: 150px;
 width: 150px;
}

.red {
 stroke: red;
 stroke-width: 5;
 stroke-dasharray: 0,0,0;
}

.white {
 stroke: white;
 stroke-width: 6px;
 stroke-dasharray: 5,5,5;
}

.blue {
 stroke: blue;
 stroke-width: 5;
 stroke-dasharray: 10,10,10;
}

.white-2 {
 stroke: white;
 stroke-width: 6px;
 stroke-dasharray: 15,15,15;
}

edited May 19 '21 at 04:50

answered May 19 '21 at 03:46

Dylan Anlezark

1,256
2
12
27

Thank you. I'm hoping to figure out a non-border-image solution as that somehow feels neater, lighter in code, render-time, etc. – Jordy May 19 '21 at 03:50
@Jordy I agree! Good luck – Dylan Anlezark May 19 '21 at 03:53
1

@Jordy I spent abit more time with this because it was really picking at my mind and I think i've come up with something that will really help find you a solution (again not perfect but something to think about): https://jsfiddle.net/wtcmpx98/52/ I'll post this as another answer so Other can find it easily. – Dylan Anlezark May 19 '21 at 04:46
Thanks Dylan. dash array seems like the way to go. This is really helpful! https://stackoverflow.com/a/15578396/11256647 – Jordy May 19 '21 at 04:52
@Jordy That was the exact post i was reading, great minds think alike ;) – Dylan Anlezark May 19 '21 at 04:58

zer00ne · Answer 5 · 2021-05-19T10:21:19.840

The following demo uses background: linear-gradient() on a total of 16 <div> positioned absolute within a relatively positioned <div>. It's a little rough -- the corners are not perfect when resized.

Demo

Drag the bottom right corner of rectangle to resize

* {
  padding: 0;
  margin: 0;
}

.box {
  position: relative;
  width: 30vw;
  height: 50vh;
  padding: 4px;
  margin: 25vh auto;
  resize: both;
  overflow: auto;
}

.box div {
  position: absolute;
}

.n {
  width: 25%;
  height: 4px;
  background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%) repeat 10% 100%;
  top: 0;
}

.e {
  width: 4px;
  height: 25%;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%) repeat 100% 10%;
  right: 0;
}

.s {
  width: 25%;
  height: 4px;
  background: linear-gradient(to left, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%) repeat 10% 100%;
  bottom: 0;
}

.w {
  width: 4px;
  height: 25%;
  background: linear-gradient(to top, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%);
  left: 0;
}

.r1 {
  right: 0
}

.r2 {
  right: 25%
}

.r3 {
  right: 50%
}

.r4 {
  right: 75%
}

.b1 {
  bottom: 0
}

.b2 {
  bottom: 25%
}

.b3 {
  bottom: 50%
}

.b4 {
  bottom: 75%
}

.l1 {
  left: 0
}

.l2 {
  left: 25%
}

.l3 {
  left: 50%
}

.l4 {
  left: 75%
}

.t1 {
  top: 0
}

.t2 {
  top: 25%
}

.t3 {
  top: 50%
}

.t4 {
  top: 75%
}

<div class='box'>
  <div class='n r1'></div>
  <div class='n r2'></div>
  <div class='n r3'></div>
  <div class='n r4'></div>
  <div class='e b1'></div>
  <div class='e b2'></div>
  <div class='e b3'></div>
  <div class='e b4'></div>
  <div class='s l1'></div>
  <div class='s l2'></div>
  <div class='s l3'></div>
  <div class='s l4'></div>
  <div class='w t1'></div>
  <div class='w t2'></div>
  <div class='w t3'></div>
  <div class='w t4'></div>
</div>

How to create a dashed border with two alternating colours?

5 Answers5

Demo