底层的边框半径颜色溢出

Question

我有两个级联图层，底层的边框颜色为红色，顶层的边框颜色为灰色。

当添加'border-radius'属性时，底层的红色将溢出。删除'border-radius'时，没关系。

我想知道如何清除它？

.arc,
.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border: 25px solid #ccc;
  border-radius: 50%;
  box-sizing: border-box;
}
.arc {
  border: 25px solid red;
}

<div class="cnt">
  <div class="arc"></div>
  <div class="cover"></div>
</div>

我真正想做的是像下面这样的圈子进度小部件。您将在前1秒内看到溢出红色。

problem detail screenshot

$(function() {
  var bottomDiv = $('.circle-progress-bottom');
  var leftDiv = $('.circle-progress-left');
  var rightDiv = $('.circle-progress-right');
  var coverDiv = $('.circle-progress-cover');
  var seconds = 5;
  var intervalID = setInterval(function() {
    if (seconds.toString().length === 1) {
      bottomDiv.html(seconds + 's');
    }
    if (seconds === 5) {
      leftDiv.addClass('circle-progress-left-rotate');
    } else if (seconds === 2.5) {
      rightDiv.css('opacity', 1);
      coverDiv.css('opacity', 0);
      rightDiv.addClass('circle-progress-right-rotate');
    }
    seconds = seconds - 0.5;
    if (seconds < -1) {
      clearInterval(intervalID);
    }
  }, 500);
});

.circle-progress-ring {
  position: relative;
  width: 80px;
  height: 80px;
}
.circle-progress-bottom,
.circle-progress-left,
.circle-progress-right,
.circle-progress-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border: 3px solid #FA6B4E;
  border-radius: 50%;
  box-sizing: border-box;
}
.circle-progress-cover,
.circle-progress-bottom {
  font-size: 20px;
  text-align: center;
  line-height: 80px;
  color: #eee;
  font-weight: bold;
  border: 3px solid #ccc;
}
.circle-progress-left,
.circle-progress-right,
.circle-progress-cover {
  clip: rect(0 40px 80px 0);
}
.circle-progress-right {
  transform: rotate(180deg);
  opacity: 0;
}
.circle-progress-left-rotate {
  animation: leftRotate 2.5s linear;
  animation-fill-mode: forwards;
}
.circle-progress-right-rotate {
  animation: rightRotate 2.5s linear;
  animation-fill-mode: forwards;
}
@keyframes leftRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes rightRotate {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle-progress-ring">
  <div class="circle-progress-bottom"></div>
  <div class="circle-progress-left"></div>
  <div class="circle-progress-right"></div>
  <div class="circle-progress-cover"></div>
</div>