make curved dotted line

Question

How can I make a curved dotted line like image below:

I tried below code but it is not what I want, it doesn't curve at edges:

ul:before {
  content: '';
  position: absolute;
  left: 11px;
  top: -15%;
  right: calc(100% - 130px);
  bottom: -63px;
  background-image: -ms-radial-gradient(circle at 8.5px, rgba(0,0,0,0) 102.25px, rgba(255,255,255,0) 1.5px), -ms-radial-gradient(circle, #000 0.25px, rgba(255,255,255,0) 0.5px), -ms-radial-gradient(circle at 1.5px, #000 0.25px, rgba(255,255,255,0) 0.5px), -ms-radial-gradient(circle, rgba(0,0,0,0) 0.25px, rgba(255,255,255,0) 1.5px);
  background-image: radial-gradient(circle at 8.5px, rgba(0,0,0,0) 102.25px, rgba(255,255,255,0) 1.5px), radial-gradient(circle, #000 0.25px, rgba(255,255,255,0) 0.5px), radial-gradient(circle at 1.5px, #000 0.25px, rgba(255,255,255,0) 0.5px), radial-gradient(circle, rgba(0,0,0,0) 0.25px, rgba(255,255,255,0) 1.5px);
  background-position: top, left, bottom, right;
  background-size: 15px 5px, 5px 15px;
  background-repeat: repeat-x, repeat-y;
  border-radius: 15px;
  z-index: -1;
}

Answer 1

You can conside SVG to build this like below:

svg {
  width: 160px;
}

path {
  fill: none;
  stroke-dasharray: 2, 10; /*adjust this to control the number of dots*/
  stroke-width:2px;
}

<svg viewBox="0 0 160 160">
  <!--                  v---v--to control the curve -->
  <path d="M150,0 C150,100 100,150 0,150"  stroke="red"  />
</svg>
<svg viewBox="0 0 160 160">
  <path d="M150,0 C150,130 130,150 0,150"  stroke="blue" />
</svg>
<svg viewBox="0 0 160 160">
  <path d="M150,0 C150,150 150,150 0,150"  stroke="black"/>
</svg>

Answer 2

I think this could get you on the right path:

ul {
  background-color: #eee;
  display: table;
  height: 100px;
  width: 350px;
}
ul:after {
  border-bottom: 3px dotted #666;
  border-right: 3px dotted #666;
  border-radius: 50px;
  content: '';
  display: block;
  height: 500%;
  width: 200%;
}

<ul></ul>

Modified from here: Any way to declare a size/partial border to a box?

Answer 3

A dotted border on a container with border-radius can achieve that effect.

* {
  box-sizing: border-box;
}
.dotted-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 330px;
  background: #f5f5f5; /* this color is just here so you can see the container for demo, take away to complete the effect */
  border-radius: 40px;
  border: 4px dotted #999;
}
.dotted-list .step-number {
  align-self: flex-end;
}
.dotted-list .step-number span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin-right: -15px;
  margin-bottom: 30px;
  background-color: green;
  color: white;
}
.call-to-action {
  margin-bottom: -20px;
}
.call-to-action button {
  height: 40px;
  line-height: 40px;
  padding: 0 40px;
  border: none;
  border-radius: 12px;
  background: green;
  color: white;
  cursor: pointer;
}

<ul class="dotted-list">
  <li class="step-number">
    <span>1</span>
  </li>
  <li class="step-number">
    <span>2</span>
  </li>
  <li class="step-number">
    <span>3</span>
  </li>
  <li class="step-number">
    <span>4</span>
  </li>
  <li class="call-to-action">
    <button>Click Me</button>
  </li>
</ul>