border-image 使 border-radius 失效是因 W3C 规范规定其不参与圆角裁剪，边框图像始终绘制在直角路径上；可用 clip-path: inset(0 round 8px) 强制裁剪实现圆角。
为什么 border-image 会让 border-radius 失效
不是 CSS 写错了，是规范本身如此。W3C 明确规定：border-image 不参与圆角裁剪，只有背景（background）和内容区域会按 border-radius 裁剪。边框图像始终绘制在原始直角路径上，超出部分被硬裁，视觉上就“圆不起来”。哪怕你写了 border-radius: 12px，只要用了 border-image，边框四角仍是尖的。
用 clip-path: inset(0 round Xpx) 强制裁出圆角
这是最轻量、无需新增 DOM 节点的解法，直接对当前元素生效：
-
clip-path: inset(0 round 8px)中的8px必须和你的border-radius值一致，否则视觉错位 - 该写法兼容 Chrome 55+、Firefox 54+、Safari 15.4+；但不支持 IE 和旧版 Safari（
- 注意：如果元素有
box-shadow，clip-path会一并裁掉阴影——需改用filter: drop-shadow()替代 - 示例：
.btn { border: 2px solid transparent; border-image: linear-gradient(45deg, #60a1fa, #2870ff) 1; border-radius: 8px; clip-path: inset(0 round 8px); }
用双层 background + background-origin 模拟渐变边框
绕过 border-image，改用背景图层叠加，完全兼容 border-radius：
- 外层背景：渐变色，设为
background-origin: border-box，并加padding占出边框宽度 - 内层背景：纯色或透明，设为
background-origin: content-box，覆盖掉渐变“侵入”内容区的部分 - 必须配
box-sizing: border-box，否则padding会撑大整体尺寸 - 示例：
.card { width: 200px; height: 120px; border-radius: 12px; padding: 2px; /* 边框宽度 */ background: linear-gradient(#60a1fa, #2870ff) border-box, white content-box; box-sizing: border-box; }
伪元素方案里最容易漏掉的两个细节
用 ::before 绘制边框虽灵活，但实操中常因两处疏忽导致圆角仍不生效：
立即学习“前端免费学习笔记（深入）”；
- 伪元素必须显式声明
border-radius，且值要和主元素**完全一致**，不能靠继承 - 伪元素的
z-index要高于主元素内容，否则会被遮盖；同时需加pointer-events: none，避免拦截鼠标事件 - 若主元素设置了
overflow: hidden，伪元素可能被裁切——此时应把overflow移到父容器上 - 别忘了给伪元素设
content: ""和position: absolute，否则不渲染
真正难的不是选哪种方案，而是判断当前项目是否允许降级（比如要不要保 Safari 14）、有没有现成的 DOM 结构可复用、以及是否要兼顾阴影和点击热区。这几个点没理清，再“完美”的代码也会在线上翻车。
