如何消除Firefox中元素的border-radius边框伪影问题？

仅Firefox浏览器存在border-radius伪影问题，Safari/Chrome等其他浏览器无法复现，特定颜色组合下该现象尤为明显。

伪影表现因显示器DPI不同有所差异：

• MacOS Retina分辨率下，背景色会从边框角落“渗出”
• 常规DPI显示器上，盒子角落呈现像素“凸起”
• 极高DPI显示器上可能难以或无法复现该问题

不同环境下的表现 #

• Firefox 107.0：角落像素“凸起”
• Chromium 107.0.5304.87：无此问题
• Firefox 107.0（MacOS）：背景色“渗出”边框（浅蓝色边框为故意设置，注意角落细节）
• Firefox 107.0（Linux高对比度模式）：角落颜色加深

复现代码 #

CSS

:root {
  --blue2: hsl(210, 100%, 98.0%);
  --blue9: hsl(206, 100%, 50.0%);
  --blue10: hsl(208, 100%, 47.3%);
  --slate3: hsl(197, 6.8%, 13.6%);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.broken {
  height: 48px;
  width: 48px;

  margin-right: 10px;

  background: var(--blue9);

  border-width: 1px;
  border-style: solid;
  border-color: var(--blue2);
  border-radius: 0.375rem;
}

.broken-subtle {
    height: 48px;
  width: 48px;

  background: var(--blue9);

  border-width: 1px;
  border-style: solid;
  border-color: var(--blue10);
  border-radius: 0.375rem;
}

HTML

<div class="broken"></div>
<div class="broken-subtle"></div>

内容的提问来源于stack exchange，提问作者endigma