Chromium浏览器中border-radius低于阈值时边框颜色异常问题求解

问题现象 #

我在学习CSS逻辑属性设置边框及圆角时发现：当元素特定角落的圆角半径低于某个临界值后，上下边框的颜色会变成左右边框的颜色。不管用逻辑属性（block/inline/start/end）还是物理属性（top/bottom/left/right）都会触发这个问题——把border-end-end-radius或border-bottom-right-radius设为小于32.3px时，原本为#012345的上下边框会变成#f00（和左右边框颜色一致）。这个问题仅在Chromium内核浏览器（Chrome、Edge Chromium）中出现，Firefox不会有此异常。

复现代码 #

CSS代码 #

.border {
  width: 300px;
  height: 300px;
  border-block: solid 20px #012345;
  border-inline: solid 30px #f00;
  border-start-start-radius: 24px;
  border-start-end-radius: 50%;
  border-end-start-radius: 100%;
  border-end-end-radius: 32.3px; /* 减小此值可复现问题 */
}

.border2 {
  width: 300px;
  height: 300px;
  border-top: solid 20px #012345;
  border-bottom: solid 20px #012345;
  border-left: solid 30px #f00;
  border-right: solid 30px #f00;
  border-top-left-radius: 24px;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 32.3px; /* 减小此值可复现问题 */
}

HTML代码 #

<div class="border">border logical</div>
<div class="border2">border physical</div>

问题原因 #

这是Chromium内核的渲染bug：当圆角半径小于相邻两个边框宽度的几何临界值时，浏览器的边框衔接渲染算法出现错误，错误地将垂直边框（左右）的颜色覆盖到了水平边框（上下）的区域。具体到这个案例，上下边框宽度20px、左右30px，32.3px是和这两个宽度相关的几何临界值，当圆角半径低于该值时，渲染逻辑就会出现偏差。

解决方法 #

方案一：嵌套元素分离边框与圆角 #

通过外层和内层元素分别承担不同边框和圆角的渲染，隔离冲突的渲染区域：

.wrapper {
  width: 300px;
  height: 300px;
  border-inline: solid 30px #f00;
  border-end-end-radius: 20px; /* 可设置任意小于临界值的半径 */
  padding: 20px;
  box-sizing: border-box;
}
.inner {
  width: 100%;
  height: 100%;
  border-block: solid 20px #012345;
  border-start-start-radius: 24px;
  border-start-end-radius: 50%;
  border-end-start-radius: 100%;
}

<div class="wrapper">
  <div class="inner">fixed border</div>
</div>

方案二：用clip-path模拟圆角 #

放弃原生border-radius，使用clip-path自定义圆角形状，绕过浏览器原生边框渲染逻辑：

.border-fixed {
  width: 300px;
  height: 300px;
  border-block: solid 20px #012345;
  border-inline: solid 30px #f00;
  /* 用polygon模拟对应圆角：左上角24px、右上角50%、左下角100%、右下角20px */
  clip-path: polygon(
    24px 0, 100% 0, 100% calc(100% - 20px),
    calc(100% - 20px) 100%, 0 100%, 0 24px
  );
}

<div class="border-fixed">fixed with clip-path</div>

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