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/

Seems to me you have your answer...No, you can't. – Paulie_D Jun 23 '16 at 08:47 — Paulie_D, Jun 23 '16 at 08:47

score 13 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

score 0 · Answer 2 · answered Nov 26 '22 at 15:29

Just stubled upon this question when I was looking for the same thing. But for other people, trying this:

You could just add a pseudo-element, and give that one a border too. Guessing you would use transparent, because otherwise multiple gradients wouldn't be visible at all.

I've got the following:

h1{
    --border-width: 5px;

    border-width: var(--border-width);
    border-style: solid;
    border-image: linear-gradient(135deg, #ff0000, transparent 20%);
    border-image-slice: 1;
    font-size: 5rem;
    position: relative;
}
h1::after{
    position: absolute;
    inset: calc(var(--border-width) * -1);
    content: '';
    background: transparent;
    border-width: var(--border-width);
    border-style: solid;
    border-image: linear-gradient(135deg, transparent 80%, #ff0000 100%);
    border-image-slice: 1;
}

I set the inset of the pseudo element to negative the border-width to make sure it aligns with the parents border.

Add more than one gradient in border-image?

2 Answers2