How do I inset border on my product grid images? - Stiletto Theme

[SanghitaWW]

Could someone help me with insetting the borders on my product grid on the collection page? Currently I have coded a border on so that it outlines the images on my product grid:

However I can't figure out how to inset this border so it actually sits on top of the inside of the image slightly - like below: 

any advice would be a major help!
Thanks

[DanCodes · Accepted solution]

Hi,

1. Go to Online Store

2. Click edit code

3. Find folder assets

4. Find file theme.css

5. Add below CSS code

.product-item__image {
  position: relative;
}

.product-item__image::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid white; 
  pointer-events: none; 
}

[SanghitaWW]

This worked perfectly, thank you!