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.
6 Replies
issam seghir
issam seghir2y 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
Tenkes2y ago
you could've added overflow: hidden; right here.
capt_uhu
capt_uhu2y 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 seghir
issam seghir2y ago
This will cause some pixels to remain in the top border and hide the text shadow below the image
issam seghir
issam seghir2y ago
thanks , I didn't know I could use it this way .
capt_uhu
capt_uhu2y 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
Want results from more Discord servers?
Add your server