How to create a dotted line consisting of circles in css?

Question

It is necessary to create a discontinuous line consisting of circles with a diameter of 4px. And the distance between the circles should be 8px. I can't get the desired result in CSS, please help.

Answer 1

radial-gradient can do it:

.line {
  height: 6px; /* diametre */
  background: 
    radial-gradient(circle closest-side, blue 90%, #0000) 
     0/14px 100%; /* 14px = 6px + 8px */
}

<div class="line"></div>