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

Store Design
, , ,

Topic summary

A user needed help creating an inset border effect on product grid images in their Shopify store using the Stiletto theme. They had successfully added an outline border but couldn’t achieve the desired inset appearance where the border sits slightly inside the image edges.

Solution provided:

  • Add CSS code to the theme.css file in the assets folder
  • Use a pseudo-element (::after) with absolute positioning
  • Apply white 2px solid border with 10px spacing from each edge
  • Set pointer-events to none to maintain image clickability

Outcome:
The solution was successfully implemented and resolved the issue. The user confirmed it worked perfectly.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

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:

Screenshot 2024-09-12 at 19.48.48.png
Screenshot 2024-09-12 at 19.48.48.png2878×1122 477 KB

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:

Screenshot 2024-09-12 at 19.50.27.png
Screenshot 2024-09-12 at 19.50.27.png2880×1298 570 KB

any advice would be a major help!
Thanks

2

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; 
}
1 Like
3

This worked perfectly, thank you!