具有可变边框宽度的css圆形遮罩

我想知道是否有一种方法可以实现像使用图像遮罩显示的图像这样的效果？

左上角的蓝色效果不是必需的。我想得到这个圆

---

任何帮助都将不胜感激。

使用具有相同背景的两个元素，并调整背景大小/背景位置，以创建此效果的错觉：

.box{
宽度：200px；
高度：200px；
边界半径：50%；
背景图片：url(https://picsum.photos/id/1057/800/800);
背景尺寸：自动220px；
背景位置：左上角；
位置：相对位置；
}
.盒子：以前{
内容：“；
位置：绝对位置；
底部：-20px；
左：0；
宽度：100px；
高度：100px；
背景图像：继承；
背景大小：继承；
背景位置：左下角；
边界半径：继承；
}

谢谢@Temani。你能不能帮我介绍一下边境的事情。。。蓝色的是可以管理的。白色边框只在屏幕的某一部分可见，那又如何呢picture@booota这可能会对你的边境有所帮助：再次感谢。我只是注意到这是通过使用图像作为背景来完成的。我们可以使用图像标签吗？@booota我不这么认为，因为主要的技巧是依赖于背景，我可以使用背景属性来模拟它