兼容旧版Safari的带圆角图片内边框实现方案求助

我最近碰到个头疼的问题：我有一张绝对定位的图片，用max-width做响应式尺寸适配，想给它加个内边框。但因为是img元素，既没法用伪元素（img不支持伪元素），也不能用box-shadow（阴影会渲染在图片后面，不是上层）。

我尝试用outline配合outline-offset的方案，大部分浏览器都能正常显示，但在旧版iOS/Safari里，outline的圆角被硬生生截断了，没法和图片的圆角完美贴合。

旧版iOS/Safari效果：

图片圆角处的红色outline被截断，无法跟随圆角弧度

其他主流浏览器效果：

红色outline完美贴合图片的圆角弧度

附上我的测试代码：

.wrapper{
  position: relative;
  width: 400px;
}
img{
  position: absolute;
  max-width: 100%;
  border-radius: 20px;
  outline: 4px solid red;
  outline-offset: -4px;
}

HTML结构：

<div class="wrapper">
  <img src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg">
</div>

这个方案在大部分浏览器里都能正常工作，但旧版Safari和一些老浏览器就不行。而且因为绝对定位和响应式尺寸的限制，我没法给图片套额外的容器元素。有没有大佬能给个兼容旧版Safari的解决办法？万分感谢！

补充说明：这个问题只出现在旧版Safari或老浏览器上，但我需要实现对这些浏览器的兼容。

备注：内容来源于stack exchange，提问作者Ood