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

I want my <div> to have a bottom border which starts from a distance away from the left. It's like:

abc
  ^^^^^^^^^^

where ^ stands for a piece of border.

I achieved this using border-image. I set a border-image to a linear-gradient() image, which starts transparent, and becomes gray from some pixels.

<style>
    div {
        width: 200px;
        border-top-style: none;
        border-bottom-style: solid;
        border-width: 1px;
        border-image: linear-gradient(to right,
            transparent 0,
            transparent 1em,
            lightgray 1em,
            lightgray 100%) 100% 1;
    }
</style>
<div>abc</div>

Now the new requirement is to add a 1px white line right below the existing line to mimic a 3d effect. I thought I could simply add a vertical gradient to the border image, but I don't know how to do it.

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>