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
1082 130 136



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
280 62 67

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development