<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>

div {
  background-repeat: repeat-x;
  background-size: 16px 4px;
  height: 16px;
  margin: 16px;
}

.div1 {
  background-image: radial-gradient(circle, black 1px, transparent 1.5px);  
}

.div2 {
  background-image: radial-gradient(circle, black 1px, transparent 2px);  
}

.div3 {
  background-image: radial-gradient(circle, black 1.5px, transparent 2px);  
}

.div4 {
  background-image: radial-gradient(circle closest-side, black calc(100% - 1px), transparent 100%);  
}

.div5 {
  background-image: radial-gradient(circle closest-side, black calc(100% - 0.5px), transparent 100%);  
}

.div6 {
  background-image:
    radial-gradient(circle closest-side, red calc(100% - 0.5px), transparent 100%),
    radial-gradient(circle closest-side, green calc(100% - 0.5px), transparent 100%),
    radial-gradient(circle closest-side, blue calc(100% - 0.5px), transparent 100%),
    radial-gradient(circle closest-side, orange calc(100% - 0.5px), transparent 100%);
  background-position: 0 0, 100% 0, 0 100%;
  background-repeat: repeat-x, repeat-y;
  background-size: 1em 4px, 4px 1em;
  width: 320px;
  height: 240px;
}