Add more than one gradient in border-image?

Question

For background-image you can add as many radial-gradient and/or linear-gradient you want. But for border-image it seems like you can only add one. If find it quite strange, because the principle of how to display gradients should be the same for border and background, right?

Is there a way to add more than one gradient in border-image? I'm only interested in a pure CSS solution.

This doesn't work, because it contains more than 1 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 works, but contains 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);
}

https://jsfiddle.net/thadeuszlay/p6r2p78g/1/

Answer 1

No, you can't set more than one image to the border-image shorthand or the border-image-source longhand property.

As per spec for border-image-source, we can see that only one image layer is specified as value.

Name: border-image-source

Value: none | <image>

whereas for background-image, we can see that multiple layers are specified.

Name: background-image

Value: <bg-image> [ , <bg-image> ]*

Below is an extract from the spec which introduces layering of background images: (emphasis mine)

The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property.