Border-image linear-gradient as two-tone solid color

Question

I have this box with a linear gradient background created as a two tone solid color. One color is 44px - the rest has another color, like this:

background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);

Works great. Now I would like to add a two-tone border to the top and bottom of this element using border image linear gradients the same way - so that the colors of the border follow the color of the background. The trick is to use linear gradients as solid colors.

I have tried something like this:

border-image: linear-gradient(right, #365aa5 44px, #000 0);
border-style: solid;
border-width: 2px 0 2px 0;

But obviousley, it's not working.

Any ideas how I could make this work?

JsFiddle here.

Answer 1

You need to add a number in the end of the border-image property. In your case it has no effect but it is still required. Also use to right instead of right

div {
  height: 50px;
  width: 80%;
  padding: 4px;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);
  /* What I'm trying: */
  border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0) 1;
  border-style: solid;
  border-width: 2px 0 2px 0;
}


body {
  padding: 20px;
  background-color: #fff;
}

<div>Two tone solid color top and bottom border to<br> match the two tone background</div>

I took the blue color so it is easier to see.

EDIT: Also possible as vibhu suggested:

border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0);
border-image-slice: 1;

Answer 2

You can add the two tone border by using the below additional code::

div::after {
 content: "";
 position: absolute;
 height: 2px;
 width: 44px;
 right: 0;
 background: #365aa5;
 top: -2px;
}


div::before {
content: ""; 
position: absolute; 
height: 2px; 
width: 44px; 
right: 0; 
background: #365aa5; 
bottom: -2px;}

Jsfiddle added here: https://jsfiddle.net/y2Ln2h86/