How to change the radius from the images with custom css code?

Shopify Discussion

Topic summary

A Shopify store owner wants to remove the border radius from product images using custom CSS, but only on specific product pages rather than site-wide.

Initial Problem:

  • Product images display with rounded corners (border radius)
  • Theme settings change affects all product pages globally
  • User needs a targeted CSS solution for individual pages

Solutions Provided:

Multiple community members offered CSS code snippets:

  1. Moeed’s approach: Add code to theme.liquid file above the </body> tag (code snippet shown in screenshot)

  2. GTLOfficial’s solution: Insert into base.css file:

.global-media-settings img, {
 border-radius: 0px !important;
}
  1. Mustafa_Ali’s method: Place code in theme.liquid under <style> tag before body

Resolution:
The user thanked all contributors, indicating at least one solution worked. The discussion appears resolved, though the user didn’t explicitly mark a specific answer as the accepted solution.

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

Hello guys, in the image below you can see that my images have a radius. How can I remove the Radius with a custom CSS code?

Bildschirmfoto 2025-03-20 um 07.29.50.png
Bildschirmfoto 2025-03-20 um 07.29.50.png2798×1460 541 KB

1 Like
2

hey @NikosBat plz share the URL of your website so i can help you

1 Like
3

Hey @NikosBat

It looks like you already solved your problem, can you confirm?

Moeed_0-1742453772444.png
Moeed_0-1742453772444.png1443×901 238 KB

Best Regards,
Moeed

1 Like
4

Hello Moeed, I changed it from the theme settings, but I need a custom css code for the product page. If I change it from the theme, then It will apply in all of my product pages which I dont want.

1 Like
5

hey @NikosBat there is a password of your website so if you share it so i can help you

1 Like
6

Can you change it back so then I can provide you a code?

Best Regards,

Moeed

1 Like
7

Hey Moeed, I just change it.

1 Like
8

Hey @NikosBat

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742454415329.png
Moeed_0-1742454415329.png1459×874 231 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
9

Hello @NikosBat
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.global-media-settings img, {
border-radius: 0px !important;
}

result

46.png
46.png821×506 416 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
10

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

1 Like
11

Hi MustafA16, here is the password: nikthe

12

Thanks for your answer MustafA16

13

Thanks for your answer GTLOfficial

14

Thanks for your answer Moeed.

1 Like
15

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.