Product Grid with 0 Product Card Gap - Border Overlap Issue

2 0 0

On my product homepage's product grid, I use custom CSS to set the horizontal and vertical gap between product cards to zero.

However, this creates the issue of two neighbouring borders overlapping magnifying the thickness of a shared border. (see first picture)

Screenshot 2024-05-03 at 04.22.09.png

How can I avoid this? Is there a better way to achieve a cleaner look (all borders with the same thickness) ?
(see second picture) 

Screenshot 2024-05-03 at 04.23.22.png

Thank you in advance, for all your help!

Replies 2 (2)

Shopify Expert
1173 139 147



Hope you are doing well.


I am San from MS Web Designer.


Kindly share the storer URL so that we can assist you.


Do let me know in case of any concerns.




If it’s helpful to you, please mark it as a solution.  

Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Shopify Expert
779 252 265

Hi Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via

BSS Commerce - Full-service eCommerce Agency