Kevin Powell - Community•2y ago

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;
}

.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

Issam seghir

CodePen

border-image probelm

...

6 Replies

issam seghirOP•2y ago

using border-image-width: 0px 0px 4px auto ; fix the problem, the problem happens when I use the shorthand border-image and specify the border width in all directions

/* the is wrong and case the problem  */
border-image: linear-gradient(to left ,red, blue) 27 / 30px; 
/* the is solution*/
border-image: linear-gradient(to left ,red, blue);
border-image-width: 0px 0px 4px auto ;

/* the is wrong and case the problem  */
border-image: linear-gradient(to left ,red, blue) 27 / 30px; 
/* the is solution*/
border-image: linear-gradient(to left ,red, blue);
border-image-width: 0px 0px 4px auto ;

Tenkes•2y ago

you could've added overflow: hidden; right here.

capt_uhu•2y ago

the border-image shortcut isn't causing this issue here. The shortcut to use here is border-image: linear-gradient(to left, red, blue) 1 / 0 0 4px 0; also fyi you don't need any of the prefixing for border-image

issam seghirOP•2y ago

This will cause some pixels to remain in the top border and hide the text shadow below the image

issam seghirOP•2y ago

thanks , I didn't know I could use it this way .

capt_uhu•2y ago

on the round corner: border-image and border-radius just don't work together. You might wana try clip-path: inset(0 round 5px 5px 0 0); instead

Gaming

Programming

border-image problem (solved)