JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left-to-right"><p>The left edge is a little wonky here.</p></div>

CSS

body {
    padding:50px;
}
p {
    height:500px;
    width:500px;
    padding:0;
    margin: auto;
}

.left-to-right {
    border-width:3px 0 3px 3px;
    -webkit-border-image: 
        -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
        -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
             -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
           -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;   
}