4

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

JoeIsBlogging
  • 185
  • 1
  • 4
  • 12

1 Answers1

3

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.stack.imgur.com/xAphp.png');
}
<img src="https://via.placeholder.com/135">

<img src="https://via.placeholder.com/400x135">
tao
  • 82,996
  • 16
  • 114
  • 150