Custom CSS lines connecting multiple divs/progress bars

Question

I want to create rounded lines that connect 3 divs together like the image below. I tried using css border radius but not sure how to make them look connected like image below.

<div class="progress bar"> 29</div>

<div class="box"></div>

<div class="progress bar"> 28</div>

.box{
  width:500px; height:100px;  
  border:solid 5px #000;
  border-color:#000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
} 

Answer 1

You may try pseudo element like this :

.progress {
  position:relative;
  margin:50px;
  padding:5px;
  border:5px solid blue;
  width:20px;
  border-radius:50%;
  text-align:center;
  background: #fff;
}
.right:after {
    content: " ";
    position: absolute;
    border-radius: 50%;
    top: 15px;
    right: -38px;
    height: 80px;
    width: 80px;
    border-right: 5px solid blue;
}
.left:after {
    content: " ";
    position: absolute;
    border-radius: 50%;
    top: 15px;
    left: -38px;
    height: 80px;
    width: 80px;
    border-left: 5px solid blue;
}
.dotted-left:after {
  border-left: 5px dotted blue;
}
.dotted-right:after {
  border-right: 5px dotted blue;
}
.dotted-progress {
  border-style:dotted;
}

<div class="progress right"> 29</div>
<div class="progress left dotted-left"> 28</div>
<div class="progress dotted-progress"> 28</div>