When it comes to the background-image, you have the freedom to include as many radial-gradient and/or linear-gradient as you want. However, for the border-image, it appears that only one gradient can be added. This seems peculiar since the display principle of gradients should theoretically be consistent for both border and background elements, don't you think?
I am curious if there is a method to incorporate more than one gradient in the border-image. I am specifically looking for a solution that relies solely on CSS.
The following code snippet does not work because it entails more than one gradient:
div {
height: 30px;
width: 40px;
border: 50px solid black;
border-image:
radial-gradient(circle at 20px 30px, green 20px, rgba(0,0,255, .5) 20px),
radial-gradient(30deg, blue 22px, red 22px);
}
https://jsfiddle.net/thadeuszlay/p6r2p78g/
This example works but consists of only one gradient:
div {
height: 30px;
width: 40px;
border: 50px solid black;
border-image: radial-gradient(circle at 20px 30px, green 20px, rgba(0, 0, 255, .5) 20px);
}