Chrome中的虚线边框-异常行为

Question

我准备了2种颜色的边框（看起来像是警示胶带）（虚线边框+背景前）。在Firefox中看起来不错，但与边框半径比较时，Chrome的破折号变短并且“未完成循环”。

如果您可以帮助我，请发表评论。

致谢

使用下面的链接，因为代码段只有一部分代码（SOF验证...）。

https://codepen.io/SeboFE/pen/QopRBb

.striped::before{
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: inherit;
  height: inherit;
  background-color: black;
  border: 10px dashed #f1c40f;
  z-index: -1;
}

.striped-rounded-30{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: #34495e;
  border-radius: 30%;
}

.striped-rounded-30::before{
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: inherit;
  height: inherit;
  background-color: black;
  border: 10px dashed #f1c40f;
  z-index: -1;
  border-radius: 31%;
}

.striped-rounded{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: #34495e;
  border-radius: 50%;
}

.striped-rounded::before{
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: inherit;
  height: inherit;
  background-color: black;
  border: 10px dashed #f1c40f;
  z-index: -1;
  border-radius: 50%;
}

  <div class="center full-width wrapper">
    <div class="striped grid-center margin-20">
      <i class="alert-symbol fas fa-exclamation-triangle"></i>
      <h2 class="text">CAUTION</h2>
    </div>  
    
    <div class="striped-rounded-30 grid-center margin-20">
      <i class="alert-symbol fas fa-exclamation-triangle"></i>
      <h2 class="text">CAUTION</h2>
    </div> 
    
    <div class="striped-rounded grid-center margin-20">
      <i class="alert-symbol fas fa-exclamation-triangle"></i>
      <h2 class="text">CAUTION</h2>
    </div> 
    
  </div>