使用border-image时，border-radius无效

当你在使用`border-image`属性创建自定义边框时，有时候可能会遇到`border-radius`不起作用的情况。这是因为`border-image`实际上是在绘制一系列的切片来模拟边框，而不是像传统的`border-style`和`border-width`那样处理单一的矩形边界。所以，`border-radius`只适用于`border-style`为`none`时。

当`border-image`存在时，浏览器可能会忽略`border-radius`，尤其是当它涉及到图像的剪裁区域时。如果你希望保持圆角，可以在使用`border-image`的同时，单独定义一个常规的`border`（例如`border-left: none; border-top: none; border-bottom: none; border-right: none;`），然后给这个新的`border`添加`border-radius`。

这是一个示例：

.container {
  border-image: url(your-border-image-url) 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-width: 20px; /* This is the traditional border for radius */
  border-radius: 10px;
}

在这个例子中，`border-image`用于定义背景图案，而`border-width`则用于创建可以应用`border-radius`的空间。