设置border-image后border-radius不起作用

根据引用\[1\]中的描述，当使用border-image属性设置边框图片后，border-radius属性无法生效。为了解决这个问题，可以尝试以下两种思路：

思路一：将边框切下来，然后使用background:url()插入作为背景图。这样可以绕过border-image属性的限制，同时可以使用border-radius属性来设置边框的圆角效果。

思路二：使用两个盒子，父盒子设置背景渐变色，并设置padding值，值为边框的大小。记得设置box-sizing:border-box来确保padding不会影响盒子的尺寸。然后再设置border-radius属性。子盒子的宽高设置为100%，背景色设置为原本的背景色，将父盒子的渐变色覆盖。最重要的是，border-radius的值要和父盒子保持一致。

以上是两种解决border-image后border-radius不起作用的思路。你可以根据具体情况选择其中一种来解决你的问题。
#### 引用[.reference_title]
- *1* *3* [css通过border-image设置渐变边框的时候，border-radius无效](https://blog.csdn.net/GongWei_/article/details/107733033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [关于css样式中border-radius和border-image不兼容问题](https://blog.csdn.net/qq_44853234/article/details/110988745)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]