使用border-radius时虚线边框两侧出现细黑线，如何解决？

问题表现：给元素设置border-radius和虚线边框后，边框两侧出现额外细黑线，效果如下：

原代码：

code {
  background-color: #040404;
  border-radius: 25px;
  padding: 2px 3px;
  font-weight: 100 !important;
  font-size: small !important;
  white-space: nowrap;
  color: white !important;
  letter-spacing: 1px;
  border-style: dotted;
  border-color: white;
  border-width: initial;
}

<code>COMING SOON</code>

解决方案 #

方法1：显式设置固定边框宽度

浏览器对border-width: initial（对应默认的medium，通常为3px）的圆角虚线渲染易出现bug，替换为固定像素值即可解决：

code {
  background-color: #040404;
  border-radius: 25px;
  padding: 2px 3px;
  font-weight: 100 !important;
  font-size: small !important;
  white-space: nowrap;
  color: white !important;
  letter-spacing: 1px;
  border-style: dotted;
  border-color: white;
  border-width: 1px; /* 替换initial为固定像素值 */
}

方法2：用伪元素模拟虚线边框

若需保留原边框宽度，通过伪元素独立渲染边框可规避渲染bug：

code {
  background-color: #040404;
  border-radius: 25px;
  padding: 2px 3px;
  font-weight: 100 !important;
  font-size: small !important;
  white-space: nowrap;
  color: white !important;
  letter-spacing: 1px;
  position: relative;
  border: none; /* 移除原边框 */
}

code::after {
  content: '';
  position: absolute;
  top: -3px; /* 对应原border-width: initial的3px */
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 25px;
  border: 3px dotted white;
  background: transparent;
  pointer-events: none; /* 不影响元素交互 */
}

原因说明 #

该问题属于浏览器渲染引擎的兼容性bug：当边框宽度为非固定值（如initial/medium）时，圆角处的虚线线段拼接会产生多余线条，固定边框宽度或用伪元素独立渲染边框可规避此问题。

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