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.

Possible duplicate of [How do I combine a background-image and CSS3 gradient on the same element?](https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element) — stdunbar, Dec 01 '17 at 18:20

U Rogel · Accepted Answer · 2017-12-01T12:08:23.843

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;

You can also omit the 1 after the border-image value and add "border-image-slice" :"1" to achieve the same effect — Vibhu, Dec 01 '17 at 11:54

score 1 · Answer 2 · answered Dec 01 '17 at 11:55

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/

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

2 Answers2