使用border-radius属性时，防止颜色重叠

Question

我有以下简单的标记：

<div class="wrapper">
    <div class="one"></div>
    <div class="two"></div>
</div>

这个CSS：

.wrapper {
    position: relative;
    width: 250px; 
    height: 250px;
}

.wrapper .one,
.wrapper .two {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 20px solid;
    border-radius: 100%;
}

.wrapper .one {
    border-color: red;
}

.wrapper .two {
    border-color: yellow;
}

当我在浏览器中预览页面时，我看到了以下结果：

我想要的是摆脱作为轮廓出现的红色。如果我删除border-radius属性，则问题不存在。

是否有任何聪明的解决方案可以防止这种重叠并仅显示.two元素的边框颜色？请注意，我不想删除任何边框颜色。

一种可能的解决方案可能是使用较暗的颜色而不是黄色的颜色。但是，它似乎不是完美的解决方案。

无论如何，这就是我想要的：