左边框渐变填充边框半径

Question

I have been trying to add gradient to my border-left on my table but couldnt come up with a solution for the same!

This is what happens

I would prerfer this where the border is curved

In the second picture i commented the border image line

  width:300px;
border-radius:20px;
box-shadow:0 0 5px rgba(0,0,0,0.2);
overflow:hidden;
font-family:"Lato",sans-serif;
font-size:16px;
line-height:1;/*originally 1.5 #9970e0*/
color:#555555;
margin: 15px;
border-left: 4px solid #9970e0  ;
border-right:0px;
border-image:linear-gradient(to bottom,#cc0099,#0099ff)1 100%;
}```
 

Answer 1

This is not how you will get gradient border, to get a gradient border, you will have to give a background gradient to parent element.Now if you want to get left border as gradient then give padding left to parent element and in similar fashion you can give padding to other sides as well.

I did not touch other parts of your css declaration, just removed the border and added a padding and background color.

 .test{width:300px; border-radius:20px; box-shadow:0 0 5px rgba(0,0,0,0.2); overflow:hidden; font-family:"Lato",sans-serif; font-size:16px; line-height:1;originally 1.5 #9970e0 color:#555555; margin: 15px; background: linear-gradient(to bottom,#cc0099,#0099ff); border-right:0px; padding: 0 0 0 5px; }.inherit{ width: 100%; padding: 0 0 0 1px; background: #fff; }

 <div class="test"> <div class="inherit"> Inherit </div> </div>