重叠元素中的透明边框

Question

我正在尝试创建2个重叠的div，当较小的div（图像中的标题为“ 1”）及其边框将在较大的div（图像中的标题为“ 2”）上“蚕食”
https://codepen.io/yanivshiloah/pen/YRLezr

.container {
  position: relative;
  width: 100px;
  height: 100px;
}

.big-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items:center;
  font-size: 50px;
  color: black;
}

.small-box {
  display: flex;
  justify-content: center;
  align-items:center;
  position: absolute;
  width: 30px;
  height: 30px;
  background: red;
  top: 0;
  right: -15px;
  border-radius: 50%;
  border: 5px solid black;
}

我希望它最终成为React组件，所以无论容器背景颜色如何，我都想创建它。我已经尝试创建另一个div，它比“ 1”大一点，只是为了用“继承”作为背景色来“表示边框”，但是当父级背景是渐变/图像时，它将不起作用。

有人知道吗？

谢谢！