Search code examples
csswoocommercestylesborder-image

Woocommerce - Add border image to products

I'm trying to add a border-image around each product, I've designed the image in illustrator but can't get it to show. The src etc is correct.

.woocommerce ul.products li.product, .woocommerce-page ul.products 
li.product {
    border-image-slice: 50 56 27 58;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source:url(bkg-img.png);
}

the image is as so enter image description here

Solution

  • You need to also specify border-style and border-width (border-image only replaces border-color and without width and style, it defaults to 0, none, respectively):

    img {
  border: 20px solid;
  border-image-slice: 50 56 27 58;
  border-image-width: 20px;
  border-image-outset: 0;
  border-image-repeat: stretch stretch;
  border-image-source: url('https://i.sstatic.net/xAphp.png');
}
    <img src="https://via.placeholder.com/135">

<img src="https://via.placeholder.com/400x135">