CSS border-image not working - Dawn v6.0.2

[Stephen_Jin]

Hi,

I'm trying to add the image below as the border of the product image for product cards on the collection pages.

I firstly uploaded the image to file library and used following CSS code:

.card-prod-img-border .card__media {
  border-image-source: url(https://cdn.shopify.com/s/files/1/0570/7123/9258/files/product_frame.png?v=1662524618);
    border-image-outset: 30px;
    border-image-repeat: round;
    border-image-slice: 50;
    border-image-width: 100%;
}

however, the code does not work no matter how I adjust the parameters of the CSS properties. 

It's working in my local dev environment, can anyone help? Is border-image working in Shopify at all?

Store URL: https://insil-dev-2.myshopify.com/

Sample collection page: https://insil-dev-2.myshopify.com/collections/all 

Password: rtayso

Please note: currently I embedded the frame into product images, which is not an ideal way of solve the issue. 

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.card-prod-img-border .card__media {
border: 15px solid transparent;
border-image: url(https://cdn.shopify.com/s/files/1/0570/7123/9258/files/product_frame.png?v=1662524618) 30 stretch;
}

Screenshot :- https://prnt.sc/mes-AaE-2Atw

[Stephen_Jin]

@ZestardTech 

Hi, I placed the code in base.css (equivalent to the theme.css in your reply) and it was not working. 

[arshia_sheikh]

@Stephen_Jin Hope you are doing well. Place this code at the end of  base.css
.collection-list .card .card__inner .card__media{
border: 15px solid transparent !important;
border-image: url(https://cdn.shopify.com/s/files/1/0570/7123/9258/files/product_frame.png?v=1662524618) 30 stretch !important;

}