How to create a dashed border with two alternating colours? - css

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.

Answer 1

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>

Answer 2

.boxborder-me {
box-shadow: 0 0 0 5px red;
outline: dashed 5px blue;
height: 100px;
}
<div class="boxborder-me"></div>

Answer 3

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" />

Answer 4

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

Answer 5

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>