How can I remove the light gray border around my collection?

Store Design
,

Topic summary

A user seeks to remove an unwanted light gray border appearing around collection items and wants to increase the circle size. The border is confirmed not to be part of the uploaded images themselves.

Solution provided:

  • Navigate to the theme.css file (line 4158)
  • Locate the .collection-item__image-wrapper--rounded class
  • Comment out or remove the border-radius: 100%; property

The issue appears related to CSS styling in a custom theme. A backup before editing is recommended. The discussion includes screenshots showing the border issue and store credentials for troubleshooting purposes.

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

Hi!

Please can u provide some code to remove the ligth gray line arround my collection? I would like to increase the circle size too

lojate_0-1667499775534.png
lojate_0-1667499775534.png1569×362 71.7 KB

lojate_1-1667499808854.png
lojate_1-1667499808854.png229×228 33.4 KB

2

Hi There,

Thanks for reaching out. Are you sure it is not a border from the image itself?

Best would be if you could share a link to your site and advise which theme you are using.

3

Yeah, im sure that border isnt from my pictures. Im using a custom theme.

My store: lojate.com
password: diagli

Aprpeciate your help

4

If you feel comfortable editing code, I would suggest making a backup of your theme, then heading over to the theme.css file. On line 4158, you should see the following:

.collection-item__image-wrapper--rounded {
  /* adding a stacking context (position: relative; z-index: 0;) is necessary due to a bug in Safari. More info here: https://bugs.webkit.org/show_bug.cgi?id=98538 */
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 100%;
}

I would go ahead and comment out the border-radius (or replace the code with the follwoing):

.collection-item__image-wrapper--rounded {
  /* adding a stacking context (position: relative; z-index: 0;) is necessary due to a bug in Safari. More info here: https://bugs.webkit.org/show_bug.cgi?id=98538 */
  position: relative;
  z-index: 0;
  overflow: hidden;
/*   border-radius: 100%; */
}

This should solve your issue.

1 Like