奇怪的黑色边框在 CSS

Question

I've created a box with a fade-background. Because of this, I get a weird black border on the right side and I don't know how to fix this. (The missing left border's on purpose.)

#fadebox
{
    width: 300px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0, 0, 0, 0));
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to right, #055100, rgba(0, 0, 0, 0)) 1 0 1 0 round;
}

Weird_Black_Border_Image.png

Answer 1

One naive implementation is just by specifying border-right: 0; So if you want just a solution and not why exactly it happened go ahead and use the following:

#fadebox
{
    width: 300px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0, 0, 0, 0));
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to right, #055100, rgba(0, 0, 0, 0)) 1 0 1 0 round;
    border-right: 0;
}

It's most likely happening because of to right background-image and border-image combining together but border-right: 0 should solve it.