How do I Modify Multicolumn card text boxes border radius

Store Design
, ,

Topic summary

Goal: change the bottom-right border radius of multicolumn card text boxes to match product card styling. The poster could only find code for the image wrapper (affecting the top-left corner) and shared screenshots to illustrate the issue.

Key steps and info exchanged:

  • Helpers asked for the store URL and password to inspect; the poster provided the preview URL and password “sheegh”.
  • A border-radius generator tool was suggested for reference (border-radius.com).

Solution provided:

  • Add custom CSS in the theme files via Online Store → Themes → Edit code → open custom CSS or base.css.
  • Insert:
    body .content-container { border-radius: 0 20px 0 20px !important; }
    (Order is top-left, top-right, bottom-right, bottom-left.)

Outcome: the poster confirmed the code worked, achieving the desired corner rounding. The discussion appears resolved.

Notes:

  • Screenshots (images) were central to visualizing the current and desired border radius.
  • The fix targets the .content-container; it applies a 20px radius to top-right and bottom-left corners while keeping top-left and bottom-right at 0 unless further adjusted.
Summarized with AI on December 27. AI used: gpt-5.
1

I want to modify the ‘bottom right corner border radius of the multicolumn card text boxes.’
I can only locate the code for the image wrapper and modify the top left corner radius,

螢幕擷取畫面 2024-06-07 184118.png
螢幕擷取畫面 2024-06-07 184118.png1710×623 170 KB

螢幕擷取畫面 2024-06-07 185225.png
螢幕擷取畫面 2024-06-07 185225.png405×711 87.5 KB

Where do I modify this code for that or what code should I add to be able to this? (like the product card border)
Thank you in advance!

2

Hello! @Dozoopets this website will be help you https://border-radius.com/
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

1 Like
3

Hello @Dozoopets
Can you share store URL?

4

Much appreciated! But I am still confused about where I should add the code to.

5

https://8a562e-4a.myshopify.com/?_ab=0&_fd=0&_sc=1

6

https://8a562e-4a.myshopify.com/?_ab=0&_fd=0&_sc=1

7

@Dozoopets
Could you please share the store or product link with password? This will allow me to inspect it and provide you with a more tailored solution.

1 Like
8

password?

9

@Dozoopets Please provide your store password to help you on this.

10

Sure. thank you.
sheegh

11

Sure. thank you.
sheegh

12

Sure. thank you.

https://8a562e-4a.myshopify.com/?_ab=0&_fd=0&_sc=1
sheegh

13

Hello! @Dozoopets Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
body .content-container {
    border-radius: 0 20px 0 20px !important;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

1 Like
14

Hello! @Dozoopets Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
body .content-container {
    border-radius: 0 20px 0 20px !important;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

1 Like
15

It worked! Thank you so much for you help!!