border-image-source设置时怎么给边框加radius

`border-image-source` 属性用于指定一个图像来用作边框，但是直接通过 `border-image-source` 设置边框时，并不能直接添加圆角（radius）。要实现带有圆角的边框图像效果，你需要使用多个CSS属性，包括 `border-radius` 来定义边框的圆角大小，以及 `border-image` 系列属性（`border-image-source`, `border-image-slice`, `border-image-width`, `border-image-outset`, `border-image-repeat`）来设置边框图像本身。

下面是一个简化的例子，展示如何为使用图像作为边框的元素添加圆角：

.element {
  border-radius: 10px; /* 设置圆角大小 */
  border-width: 10px;  /* 设置边框宽度 */
  border-image-source: url('path/to/image.png'); /* 设置边框图像的路径 */
  border-image-slice: 25; /* 根据需要调整图像边缘的切片 */
  border-image-repeat: round; /* 控制图像边缘的重复方式 */
  border-image-width: 10px; /* 设置边框图像的宽度 */
  border-image-outset: 0; /* 可选，设置边框图像向外扩展的距离 */
}

- `border-radius` 设置元素的圆角大小。
- `border-image-source` 指定图像的URL作为边框图像。
- `border-image-slice` 定义图像边框内边距，通常用于切割图像中的特定部分用于边框。
- `border-image-repeat` 定义图像边缘的重复行为。
- `border-image-width` 定义边框图像的实际宽度。
- `border-image-outset` 设置边框图像向外扩展的距离，可选。

注意，`border-image` 属性会覆盖 `border-style`、`border-width` 和 `border-color` 属性的相应值。