CSS自定义顶部边框时边角交线不垂直问题该如何解决

问题根源 #

你遇到的边角交线不直问题，核心原因是边框绘制基准不统一：右侧、底部、左侧用系统原生实体border，绘制基准为border-box；顶部用背景渐变实现，默认绘制基准为padding-box，二者在圆角区域的坐标计算规则不同，导致边角衔接处错位。

修复方案 #

推荐统一用背景渐变实现所有边框，兼容性好、逻辑简单，可完美解决对齐问题：

.target-element {
  border-radius: 4px;
  /* 4个渐变分别对应：顶部缺省边框、右侧边框、底部边框、左侧边框 */
  background-image: 
    linear-gradient(to left, transparent 115px, #b0b0b0 115px),
    linear-gradient(#b0b0b0, #b0b0b0),
    linear-gradient(#b0b0b0, #b0b0b0),
    linear-gradient(#b0b0b0, #b0b0b0);
  background-size: 
    100% 1px, /* 顶部边框尺寸 */
    1px 100%, /* 右侧边框尺寸 */
    100% 1px, /* 底部边框尺寸 */
    1px 100%; /* 左侧边框尺寸 */
  background-position: 
    0 0, /* 顶部边框定位 */
    100% 0, /* 右侧边框定位 */
    0 100%, /* 底部边框定位 */
    0 0; /* 左侧边框定位 */
  background-repeat: no-repeat;
  /* 关键配置：让背景计算规则和border完全对齐，适配圆角 */
  background-origin: border-box;
  padding: 12px; /* 可根据业务需求调整内边距 */
}

如果偏好伪元素实现方案，可参考以下代码，核心是让伪元素完全贴合父元素圆角范围，和实体border基准对齐：

.target-element {
  position: relative;
  border-radius: 4px;
  border-right: 1px solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
  border-left: 1px solid #b0b0b0;
  padding: 12px;
}
.target-element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to left, transparent 115px, #b0b0b0 115px);
}

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