How to add curved radius to images in "Image With Text"

Store Design
, ,

Topic summary

A user seeks to add curved borders (border-radius) to images in their Shopify store’s “Image With Text” section.

Initial Solutions Proposed:

  • One responder suggests adding CSS code targeting .image-with-text__media.image-with-text__media--adapt with border-radius: 50px to the theme’s CSS file (base.css, style.css, or theme.css).
  • Another recommends using Custom CSS in Theme Settings with code targeting .pp-container .pp-flex.pp-items-center img with border-radius: 30px !important.

Outcome:

  • The original poster tested the first solution but reported it didn’t work for their specific setup.
  • The second solution also failed to produce results.
  • Resolution: The user eventually solved the issue independently by identifying a different CSS class specific to their theme. The discussion is now closed with the problem resolved.
Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

How do I make these images in “Image To Text” section, have a curved radius?

Store is blossomvase.com

How it is currently
How it is currently1229×401 235 KB

How I want the radius to look like

1 Like
2

Hi @blossomvase

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.image-with-text__media.image-with-text__media--adapt {
    border-radius: 50px;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hi @blossomvase

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.pp-container .pp-flex.pp-items-center img {
    border-radius: 30px !important;
}

image (7).png
image (7).png1342×715 267 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

4

I pasted into base.css, unfortunately did not work for me?

blossomvase_0-1735865245755.png

blossomvase_1-1735865254018.png

5

Sorry did not work for me.

6

Did you already solved the problem?

7

Yes I did, turned out to be a different CSS class. Thanks for your help.