Make a dashed vertical line in css

Question

I have the following design for make the layout. I'd like to make that line with CSS and HTML but my way doesn't work.

I tried with a border and used the property "dashed" with css but the lines appear vertically.

This might help: https://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes — Zsolt Balogh, Aug 06 '21 at 18:44
[Polite] Please can you remove the "Blazor" tag from this question. — MrC aka Shaun Curtis, Aug 06 '21 at 18:55

score 3 · Accepted Answer · edited Aug 07 '21 at 12:03

You can use repeating-linear-gradient() function, for example:

Image the syntax of the function in this example like this: repeating-linear-gradient(item 1, item 2, item 3, item 4)

item 1: Make the gradient starts with the color: white

item 2: Make the color: white go to height 2px

item 3: Start a new color: #CCC from the 2px (continue after the height of the previous color)

item 4: Make the last color (#CCC) ends in 4px . so the the color #CCC start from 2px and go to 4px, so the height of it = 2px , which is the same height of the color: white (item 2)

so this process repeated until gradient fills the height of the element

Note : You can change the size (height) of the dash by change the px in the function ( in this example it's 2px )

div {
  width: 4px;
  height: 200px;
  background-image: repeating-linear-gradient(white, white 2px, #CCC 2px, #CCC 4px);
}

<div></div>

Make a dashed vertical line in css

1 Answers1