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.
11

Sure. thank you.
sheegh