title: How to draw circle shape border stroke drawn with separated lines?
body: <p>I'm trying to achieve this custom shape with Compose</p>
  <p><a href="https://i.stack.imgur.com/BkwXU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BkwXU.png" alt="Receipt image" /></a></p>
  <p>But for some reason the separator offseted circle is drawn with a dotted line and here is the code</p>
  <pre><code>@Preview
  @Composable
  private fun ReceiptSeparator () {
  
      Row(modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp) ,
          verticalAlignment = Alignment.CenterVertically  ,) {
          Box(
              modifier = Modifier
                  .requiredSize(50.dp)
                  .background(Color.White)
                  .offset(-40.dp)
                  .clip(CircleShape)
                  .border(BorderStroke(2.dp, Color.Gray))
  
          ){}
  
          Box(
              Modifier
                  .height(1.dp)
                  .requiredWidth(250.dp)
                  .weight(3f)
                  .background(Color.Gray, shape = DottedShape(step = 20.dp))
          ){}
          Box(
              modifier = Modifier
  
                  .offset(40.dp)
                  .clip(CircleShape)
                  .border(BorderStroke(2.dp, Color.Gray))
                  .background(Color.White)
                  .size(50.dp)
          ){}
      }
  }
  </code></pre>
  <p>Why the circle is drawn with a dotted line and how to achieve this shape correctly?</p>