Make Product Images Rounded Only In Product Page

Store Design
, , , , , , ,

Topic summary

A Shopify store owner using the Stilleto theme wants to add rounded corners to product images, but only on product pages and only on desktop devices.

Initial Solutions Provided:

  • Two users offered CSS code snippets to add border-radius to product page images
  • Code targets .template-product img with border-radius values (20px or 50%)
  • Instructions given to add code to theme.css file via Online Store > Themes > Edit Code

Desktop-Only Requirement:
After the initial solution worked, the user requested desktop-only implementation to avoid issues on mobile.

Final Solutions:

  • Wrap the CSS in a media query: @media (min-width: 768px) or @media screen and (min-width: 750px)
  • This ensures rounded corners appear only on desktop viewports
  • Adjust border-radius percentage/pixels as needed for desired roundness

Status: Resolved with desktop-specific CSS implementation.

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

Hello!

I want to make my product images rounded only in the product page, nowhere else (desktop versions only).

How can I do this?

My theme is Stiletto and my website is www.truepodium.com

Thanks in advance!

2

@martujv what is the password to view page?

3

y22

4

@martujv - how much rounded images do you want? corner only of image as a circle?

5

Corner only

6

@martujv - please add this css to the very end of your theme.css file and check, adjust the number as per the need
Shopify Admin → Online Store ->Theme → Edit code → theme.css

.template-product img{border-radius: 20px;}
1 Like
7

Hello,

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
img.image__img {
    border-radius: 50%;
    overflow: hidden;
}

Thanks!

1 Like
8

It worked! Thank you! You are the best

1 Like
9

@martujv - thank you very much

10

Just one last question, is there any way to make this work on desktop versions only? On mobile it looks a bit strange

11

Hi, is there any way to apply this only on desktop versions and not on mobile versions?

12

Hello?

13

Use this code @martujv

@media (min-width: 768px){
img.image__img {
    border-radius: 20% !important;
    overflow: hidden;
}
}
1 Like
14

@martujv sorry for the late reply, only for desktop

@media screen and (min-width:750px){
.template-product img{border-radius: 20px;}
}
1 Like