How Does Border-Image Work With Linear-Gradient

How does border-image work with linear-gradient?

TL;DR

When using a gradient, the size of the image is the size of the element. The border-image-width will define the 9 regions where we will place the slices (if not defined, border-width is used). The border-image-slice will consider the initial image to create the slices. A unitless value is considered as a pixel value and a percentage value is resolved against the size of the element.

To have a perfect result we should have the slices equal to regions, and for this we need to have the border-image-slice equal to border-image-width (or border-width) when used without a unit. Using a percentage, the computed value should be the same.

In your case 80 in the slice means 80px and you have a border of 5em which is 5x16px = 80px.

Let's take an easy example.

div {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 10px solid transparent;
}

div.box {
  background: repeating-linear-gradient(45deg, #000, #000 5px, transparent 5px, transparent 10px) border-box, red;
}

div.border {
  border-image: repeating-linear-gradient(45deg, #000, #000 5px, transparent 5px, transparent 10px) 50 fill;
  border-image-width: 50px;
  background: red;
}

<div class="box"></div>

<div class="border"></div>

Possible to use border-radius together with a border-image which has a gradient?

Probably not possible, as per the W3C spec:

A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.

Border Linear Gradient

You can use the border-image css property:

border-width: 4px;
border-style: solid;
border-image: linear-gradient(to bottom, cyan, blue) 1;

Tutorial on how it works: https://codyhouse.co/nuggets/css-gradient-borders#:~:text=How%20to%20create%20gradient%20borders%20in%20CSS.%20To,linear-gradient%20%28to%20right%2C%20darkblue%2C%20darkorchid%29%201%20%3B%20%7D

How do I use gradient image which gradates in both directions as border-image?

Instead of border consider multiple background. I used different colors to better see the result:

.box {  width: 200px;  background:     linear-gradient(blue, blue) 1em 100%/ 100% 1px no-repeat,    linear-gradient(red, red)   1em 100%/ 100% 2px no-repeat;}

<div class="box">abc</div>

Is it possible to set border-image and background both with repeating-linear-gradient property?

You can use multiple background:

body {    background:    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);}
.under_banner {    width: 100%;    left:0;    height: 20%;    bottom:0;    background:       repeating-linear-gradient(130deg, #f6d808, #ffc107 10%) bottom/100% calc(100% - 10px),      repeating-linear-gradient(145deg, #ff0000, #ff9020 50%);    background-repeat:no-repeat;    text-align: center;    line-height: 10px;    position: fixed;    z-index: 1;}

<body>  <div class="under_banner">    <p>Hello StackOverflow Community!</p>  </div></body>

How to set multi-color border using border-image and linear-gradient?

The issue is that percentages are relative to the element not the border which will make the 20% bigger than 5px.

You need to consider pixel values. You also need to start from the bottom because the top reference is also the top of the element:

a {  color: #707070 !important;  font-size: 20px;  text-decoration: none;  margin-right: 50px;  border-bottom: 5px solid;  border-image:     linear-gradient(to top, #707070 1px, #a4c0e9 1px, #a4c0e9 4px, #707070 4px) 5;}

<a>A link element</a>

Border Image with Linear Gradient

There is a css property called border, it takes as a param the thickness, the type of border and the color of the border

if you want to use a gradient use the css property border-image

<div class="box">

  hey there
</div>

css:

.box{
      width: 250px;
      height: 20px;
      background: transparent;
      border-bottom: 5px solid transparent;
      -moz-border-image: -moz-linear-gradient(left,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0) 100%);
      -webkit-border-image: -webkit-linear-gradient(left,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0) 100%);
      border-image: linear-gradient(left,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0) 100%);
      border-image-slice: 1;
    }

http://jsfiddle.net/agkety8w/

in your case do the following:
the gradient:

 return 'linear-gradient(to left,  '+c1.rgb+' 0%, '+c2.rgb+' 50%, '+c1.rgb+'

the function:

function PPAP() {
    elements = $('li');
    elements.each(function() { $(this).css({"borderImage":random(), "borderImageSlice": "1","borderBottom": "5px solid transparent"}); });
}

https://jsfiddle.net/tdeqvoaa/

How Does Border-Image Work With Linear-Gradient