Make Images Rounded

Topic summary

Goal: round the images in the multicolumn section of the Shopify “Stiletto” theme.

Proposed solution: add a CSS rule at the end of theme.css.

  • Selector: .image.multi-column__grid-item-image.aspect-ratio–landscape.animation–lazy-load.loaded img
  • Property: border-radius: 4%;

Context: The requester asked for border-radius: 12px (pixel-based). The provided fix uses a percentage (4%), which also rounds corners and can be adjusted to taste (e.g., increase/decrease %, or switch to px for fixed rounding).

Notes:

  • “border-radius” is the CSS property that controls corner roundness.
  • Screenshots were included to illustrate current vs desired appearance; the code snippet is central to the solution.

Outcome: The change worked as confirmed by the requester. No further issues raised; thread resolved.

Summarized with AI on December 11. AI used: gpt-5.

Hi I want to make the images rounded in my multicolumn section.

This is how it looks like now (straight corners):

And this is how I want it to look like, with border-radius: 12px:

My website is https://frz5v8fro2s6ymiz-60150284501.shopifypreview.com and the password is y22

The theme is Stiletto

Could someone help me out with some code?

Thanks in advance!!! :grinning_face:

Paste this code in the end of theme.css file.

.image.multi-column__grid-item-image.aspect-ratio--landscape.animation--lazy-load.loaded img {
    border-radius: 4%;
}
2 Likes

Worked!! Thanks a lot!!