如何使用径向渐变为虚线边框添加渐变

Question

我想要设计像我下面附加的图像，并尝试了在堆栈溢出时发现的不同解决方案。我尝试了以下代码，请任何人帮助我为虚线边框添加渐变

.low-rate {
    width: 200px;
    padding: 8px 8px 0;
    border-radius: 8px;
    border: 0;
    float: right;
    background-image: radial-gradient(circle closest-side, #a74498 calc(100% - 0.5px), transparent 100%), radial-gradient(circle closest-side, #30a3dd calc(100% - 0.5px), transparent 100%), radial-gradient(circle closest-side, #a74498 calc(100% - 0.5px), transparent 100%), radial-gradient(circle closest-side, #6655a1 calc(100% - 0.5px), transparent 100%);
    background-position: 0 0, 100% 0, 0 100%;
    background-repeat: repeat-x, repeat-y;
    background-size: 7px 3px, 3px 5px;
}

<div class="col-xs-12 low-rate"><!---->
  <div class="ng-star-inserted">
    <h4>Lowest Rate</h4>
    <ul class="low-rate-list"><!---->
      <li class="ng-star-inserted"> Inside <span>$1,458</span></li>
      <li class="ng-star-inserted"> Outside <span>$1,548</span></li>         <li class="ng-star-inserted"> Balcony <span>$1,656</span></li>         <li class="ng-star-inserted"> Suite <span>$3,300</span></li>
    </ul>
   </div>
 </div>

enter image description here