Linear gradient linear image as a two-color solid color

Question

I have this box with a linear gradient background created as a two-color solid color. One color - 44px - the rest have a different color, for example:

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

It works great. Now I would like to add a two-color border at the top and bottom of this element, using linear gradients of the border image in the same way that the border colors match the background color. The trick is to use linear gradients in the form of solid colors.

I tried something like this:

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

But obviously it does not work.

Any ideas how I could make this work?

JsFiddle is here .

Answer 1

You need to add number at the end of the border-image property. In your case, this 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 to make it easier to see.

EDIT: Also possible as vibhu :

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

Answer 2

You can add two tone borders using the following 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/