移动端0.5px边框圆角显示异常原因咨询

我使用以下CSS代码：

border: 0.5px solid #efefef;
border-radius: 5px;

出现仅圆角处线条无法显示的问题，但同时存在一处带0.5px线条和圆角的UI显示完全正常，想了解0.5px线条在移动端的支持情况，以及为何会出现部分正常部分异常的现象。

一、移动端0.5px边框的基础支持情况 #

• 0.5px是CSS逻辑像素，在Retina屏（设备像素比DPR>1）上，浏览器会尝试将其映射为对应物理像素的一半（比如DPR=2时对应1物理像素）。
• 当前移动端主流浏览器（Chrome、Safari、微信内置浏览器等）基本支持0.5px边框，但渲染效果会受浏览器内核、元素属性、圆角参数等多种因素影响，并非绝对一致。

二、部分场景圆角边框失效的核心原因 #

1. 浏览器圆角渲染算法的局限性 #

当0.5px细边框与圆角结合时，部分浏览器在处理圆角区域的边框渲染时，会因为以下逻辑导致线条丢失：

• 圆角渲染需要对边框进行像素级的平滑抗锯齿处理，0.5px的线条本身处于物理像素的边缘，圆角的曲线计算可能会让这部分线条的像素权重被稀释，最终无法被渲染；而直角部分是直线对齐，更容易被浏览器识别并渲染。
• 不同渲染引擎（WebKit/Blink等）对这种细边框+圆角的处理逻辑存在差异，这是导致同一代码在不同场景下表现不同的核心原因之一。

2. 元素布局与属性的干扰 #

• 元素类型：如果异常元素是行内元素、替换元素（如img、input），浏览器对其边框的渲染优先级和块级元素不同，0.5px+圆角的组合更容易触发渲染bug；而正常显示的UI可能是块级元素，渲染逻辑更稳定。
• 附加属性：如果异常元素使用了transform、position: fixed等属性，会干扰浏览器对边框像素的计算，尤其是圆角区域的精细渲染，导致线条失效。

3. 设备像素比（DPR）的差异 #

不同移动设备的DPR不同：

• 若设备DPR为2，0.5px逻辑像素刚好对应1物理像素，渲染精度足够，圆角边框能正常显示；
• 若设备DPR为1.5或3，0.5px对应0.75或1.5物理像素，浏览器无法精准渲染非整数的物理像素，会自动进行像素取舍，圆角处的细边框更容易被“舍弃”。

三、稳定实现0.5px圆角边框的替代方案 #

如果后续需要使用细边框+圆角，推荐两种更稳定的写法：

• 伪元素缩放方案

.target-element {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.target-element::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #efefef;
  border-radius: 5px;
  transform: scale(0.5);
  transform-origin: 0 0;
}

• box-shadow模拟方案

.target-element {
  border-radius: 5px;
  box-shadow: 0 0 0 0.5px #efefef;
}

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