Removing white space between product grid image and created border

Retired Boards Appdev Store Design
, ,

Topic summary

A user encountered unwanted white space between product grid images and custom circular borders created with CSS. They had applied a border-radius and border styling to .card__inner but gaps remained visible.

Solution provided:

  • Add CSS targeting .card__media with clip-path: ellipse(50% 50% at 50% 50%)
  • This clips the image to match the circular border shape

Status: Resolved - the user confirmed the solution worked successfully.

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

Hello,

I can’t seem to remove the white space between the images in the product grid and the created border around the image. Please refer to the photo provided.

Here is the code used for the border (Custom CSS):

.card__inner {
border-radius: 50%;
border: 8px solid #d4af37;
}

Website url: https://shivaya-bless.myshopify.com/collections/loose-beads-and-pendant-necklaces
Password: libahl

Adhi_0-1716092058970.png
Adhi_0-1716092058970.png311×396 46.1 KB

2

Hello Adhi,

Add the following custom CSS to remove that gap:

.card__media.shape--round {
clip-path: ellipse(50% 50% at 50% 50%);
}

Kind Regards,

Blake

3

That works, thank you!