使用border-image-style时border-radius失效的解决办法

直接给你几个实战验证过的可行方案：

方法一：伪元素+Mask实现渐变边框（推荐） #

利用CSS Mask实现带圆角的渐变边框，同时给伪元素加Z轴旋转，父元素开启3D空间保证渲染正确：

/* 父元素 */
.rotate-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform-style: preserve-3d; /* 开启3D空间，保证子元素3D变换生效 */
  perspective: 800px; /* 可选，增强3D视觉效果 */
}

/* 伪元素做渐变边框 */
.rotate-circle::before {
  content: '';
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  border-radius: inherit; /* 继承父元素圆角 */
  padding: 4px; /* 控制边框宽度 */
  background: linear-gradient(135deg, #ff4d4d, #4d90ff); /* 自定义渐变样式 */
  /* 用Mask实现边框效果，保留中间内容区域透明 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: xor;
  /* 给边框加Z轴旋转 */
  transform: rotateZ(45deg);
}

这个方法能完全保留圆角，渐变边框样式可自由调整，3D变换不会破坏圆角效果。

方法二：Clip-path裁剪圆形 #

如果元素是纯圆形，用clip-path直接裁剪，再配合伪元素做渐变边框：

.rotate-circle {
  width: 200px;
  height: 200px;
  clip-path: circle(50%); /* 裁剪成圆形 */
  position: relative;
  transform-style: preserve-3d;
}

.rotate-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: 4px; /* 边框宽度，留出中间内容区域 */
  background: linear-gradient(135deg, #ff4d4d, #4d90ff);
  transform: rotateZ(45deg);
}

写法简洁，适合不需要复杂圆角（如椭圆）的场景，3D变换下裁剪效果稳定。

方法三：透明边框+Background-clip #

如果浏览器兼容性要求不高，也可以用透明边框配合background-clip：

.rotate-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid transparent; /* 透明边框 */
  background: linear-gradient(135deg, #ff4d4d, #4d90ff) border-box; /* 渐变填充边框区域 */
  transform: rotateZ(45deg);
  transform-style: preserve-3d;
}

注意：部分旧浏览器在3D变换下可能出现圆角渲染异常，遇到问题优先用前两种方法。

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