Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
7 replies
Issam Seghir

border-image problem (solved)

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.
Imgur
Preview image
CodePenIssam seghir
border-image probelm
...
border-image probelm
Was this page helpful?