JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test1">100%
</div>
<div class="test2">0%
</div>
<div class="bg">
</div>

CSS

div {
    position: absolute;
    width: 300px;
    height: 200px;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    top: 0px;
    border-bottom-width: 25px;
}

.test1 {
    left: 0px;
          /* This shows the bottom border properly */
    -webkit-border-image: url("http://www.clker.com/cliparts/k/S/p/m/B/C/straight-line-hi.png)";

}

.test2 {
    left: 320px;
   /* This one would show the gradient in the background and the border as the background color! */
   
    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 0% 0%;
    -webkit-transition: all 5s;
}
.test2:hover {
    left: 320px;
   /* This one would show the gradient in the background and the border as the background color! */
   
    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 100% 0%;
}

.bg {
    left: 640px;
    background: linear-gradient(45deg, black, transparent, red);
}