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/ExedPvxI expected the border to only appear on the bottom of the image, with the top corners of the image being unaffected.
6 Replies
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
you could've added
overflow: hidden;
right here.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
This will cause some pixels to remain in the top border
and hide the text shadow below the image
thanks , I didn't know I could use it this way .
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