Border image
I'm a little confused about image borders regarding what kind of image and image extension that can be used as a border image, because when i try to use background image from this source https://pngtree.com/so/border and I took this border with a black ornate pattern and when I use it as Border image it doesn't work I've confirmed a few things like there are no writing errors in the source.
5 Replies
I also checked browser compatibility and my browser clearly supports the border image property
yep
border-image has been around a very long time. There are a few browser inconsistencies that got cleaned up this year but nothing that should really be stopping a border from showing up. Going to need to see some code to know what's going on. can you throw together a codepen.ioYou have to use border-image-slice to specify the parts of that image to use for each of the borders. The only images that don't require slicing are the ones that contain continuous patterns and don't form a box shape. https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
border-image-slice - CSS: Cascading Style Sheets | MDN
The border-image-slice CSS property divides the image specified by border-image-source into regions. These regions form the components of an element's border image.
If you want to use those images without slicing, you can just use them as the background image instead of as a border image.
Border slice !