CSS圆角虚线边框出现双短划线异常bug如何解决

问题原因 #

该问题由浏览器虚线边框的渲染特性导致：你为元素四个边都设置了虚线样式，仅将右侧边框颜色设为透明时，上、下边框的末端虚线片段会延伸到右侧边框的拐角区域，相邻边框的虚线片段叠加就出现了异常的双短划线效果。

修复方案 #

• 方案一（最简便）：直接移除右侧边框的渲染，而非仅设置透明。
  将原有CSS调整为如下内容即可：

position: relative;
width: 156px;
height: 192px;
right: 50px;
bottom: 113px;
border-width: 2px 0 2px 2px;
border-radius: 92px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-color: #c7cac7;
border-style: dashed;

这里直接将右侧边框宽度设为0，完全不参与渲染，就不会出现拐角处虚线叠加的问题。

• 方案二（适配特殊圆角需求）：如果方案一的圆角衔接效果不符合预期，可以在原有CSS基础上新增裁剪属性，裁掉右侧多余区域：

clip-path: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) 100%, 0 100%);

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