How to remove rounded corners from product images?

Store Design
, ,

Topic summary

A user is experiencing an issue where product images display an unwanted outline or border around their rounded corners (approximately 25px radius). The problem appears across multiple locations on their Shopify store (deskgenix.com).

Proposed Solutions:

  • Two users suggested adding CSS code to the base.css file to remove border-radius entirely
  • One solution targeted specific product media elements with border-radius: unset !important;
  • Another suggested applying border-radius: 0 !important; to all images

Clarification & Resolution:

  • The original poster clarified they want to keep the rounded corners but remove the visible outline where square edges would be
  • The CSS solutions provided did not resolve the issue
  • A later suggestion recommended adjusting border thickness to 0px via Theme Settings → Media in the theme editor, which may address the actual problem

The discussion remains open regarding whether the final suggestion successfully resolved the outline issue.

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

As you can see from the image, all of my product imagery in essentially every location has this outline where the radius has been changed to approximately 25px. How can remove them, this is seriously frustrating.

image_2023-12-11_135446139.png
image_2023-12-11_135446139.png1448×759 83.7 KB

2

Hi @Finlay101 , can you share your store url?

3

Hi @Finlay101

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

#MainContent #shopify-section-template–20270389428523__main .product__media img.image-magnify-lightbox {

border-radius: unset !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

Hello @Finlay101 :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

img {
    border-radius : 0 !important;
}

The result

Screenshot 2023-12-11 at 14.49.22.png
Screenshot 2023-12-11 at 14.49.22.png1176×355 57.7 KB

5

https://deskgenix.com

6

I’m not sure you understood. I still want the curved edges, but the outline of where square edges would be still shows.

7

Unfortunately this didn’t work.

8

Hi mate,

Hope you’re not still having this issue but if you are you can go to the theme editor → theme settings → media, and then adjust the thickness of the borders to 0px. Should fix your issue.