How can I prevent the border from showing up in the top corners of the image when using border-image?

I’m using border-image to add a linear gradient border to the bottom of an image.
However, the top corners of the image are also showing the border, even though I only want it to appear on the bottom.
Here’s an image that illustrates the problem:

I’ve applied the following CSS to the image container:

see : https://codepen.io/ISsamDev99/pen/ExedPvx

.articles img {
    display: block;
    max-width: 100%;
    border-bottom: solid 3px ;
    border-top-right-radius: var(--main-border-radius);
    border-top-left-radius: var(--main-border-radius);
    border-image: linear-gradient(to left ,red, blue) 27 / 30px;
}

I expected the border to only appear on the bottom of the image, with the top corners of the image being unaffected.

>Solution :

Define a width for the border-image as well that removes it from top/left/right

border-image-width: 0 0 30px 0;