CSS Gradient over multiple element's borders

Question

I'm trying to achieve something like this (colors irrelevant):

And I have close to no idea how to achieve this. I've managed to figure out how to do gradients over multiple elements through Multiple.js but I didn't manage to figure out any method to applying that for borders. Here's what I have so far:

.interestingElement {
    padding: 0.5em 1em 0.6em 1em;
    border: 1px solid black;
    border-radius: 5px;
    margin: 1em;
    font-size: 1.1em;
    background-image: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

I'm hoping that there might be a method to do this without resorting to separate gradients for each element. Any help would be greatly appreciated. Thanks!

EDIT 1: If my goal was just to add a gradient border, I would definitely just use border-image instead. Could there maybe be a way to make this go through multiple elements? Something like this perhaps:

.interestingElement {
    padding: 0.5em 1em 0.6em 1em;
    border: 5px solid black;
    border-image: linear-gradient(to right, black 0%, white 100%) 30% stretch;
    border-radius: 5px;
    margin: 1em;
}

Answer 1

You have 2 posibilities to achieve this effect.

Both set the gradient on a base element, leaving some kind of transparency on the child elements to get it to show.

One posibility is to use border-color: transparent, and some special effects on the background to limit it to content, and on shadows to mask the gradient around the boxes. (This is tricky. An alternative probably easier to use would be to use pseudo elements)

The other posibility is to use a blend mode. This has the added bonus to achieve also the gradient on the text. But has less browser suport, and limits somehow the colors that can achived in nested elements.

In the snippet, the element1 class shows the first approach, and element2 the second

 .base { width: 300px; height: 100px; background: linear-gradient(to right, red, green); margin-top: 10px; overflow: hidden; } .element { display: inline-block; width: 100px; height: 30px; top: 25px; position: relative; border-radius: 10px; border: solid 10px black; background-color: white; font-size: 30px; } .element:nth-child(1) { margin-left: 10px; } .element:nth-child(2) { margin-left: 30px; } .element1 { border-color: transparent; background-clip: content-box; box-shadow: 0px 0px 0px 30px white, 10px -20px 0px 20px white, 10px 20px 0px 20px white ; } .element2 { border-color: black; mix-blend-mode: lighten; box-shadow: 0px 0px 0px 30px white, 10px -20px 0px 20px white, 10px 20px 0px 20px white ; }

 <div class="base base1"> <div class="element element1">ONE</div> <div class="element element1">TWO</div> </div> <div class="base base2"> <div class="element element2">ONE</div> <div class="element element2">TWO</div> </div>

Answer 2

You can create this effect by using multiple linear-gradients

 div { width: 200px; height: 80px; border-radius: 5px; background: linear-gradient(to right, orange, yellow), linear-gradient(to right, orange, yellow), linear-gradient(to right, orange, orange), linear-gradient(to right, yellow, yellow); background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%; background-position: 0 0, 0 100%, 0 0, 100% 0; background-repeat: no-repeat; }

 <div></div>

Apply prefixes for more browser support

 div { width: 200px; height: 80px; border-radius: 5px; background: -webkit-gradient(linear, left top, right top, from(orange), to(yellow)), -webkit-gradient(linear, left top, right top, from(orange), to(yellow)), -webkit-gradient(linear, left top, right top, from(orange), to(orange)), -webkit-gradient(linear, left top, right top, from(yellow), to(yellow)); background: -webkit-linear-gradient(left, orange, yellow), -webkit-linear-gradient(left, orange, yellow), -webkit-linear-gradient(left, orange, orange), -webkit-linear-gradient(left, yellow, yellow); background: -o-linear-gradient(left, orange, yellow), -o-linear-gradient(left, orange, yellow), -o-linear-gradient(left, orange, orange), -o-linear-gradient(left, yellow, yellow); background: linear-gradient(to right, orange, yellow), linear-gradient(to right, orange, yellow), linear-gradient(to right, orange, orange), linear-gradient(to right, yellow, yellow); background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%; background-position: 0 0, 0 100%, 0 0, 100% 0; background-repeat: no-repeat; }

 <div></div>