Hi, I am trying to round the corner of the pictures inside the cards:
https://wmqgez-r2.myshopify.com/pages/pattern-making
Is there a way to do it please?
Warm regards.
Topic summary
A user seeks to add rounded corners to images displayed within card components on their Shopify store page.
Proposed Solutions:
Three different CSS approaches were offered:
- Option 1: Target
.multicolumn-card__imageclass inbase.csswithborder-radius: 20px !important; - Option 2: Apply
border-radius: 20px;to.multicolumn-list .media--transparentselector - Option 3: Add
img { border-radius: 30px; }directly to the section’s Custom CSS field
All solutions involve adding CSS code to modify the border-radius property. Screenshots demonstrate the expected visual outcome with rounded image corners. The discussion remains open as the original poster has not confirmed which solution worked.
@Artez please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
.multicolumn-card__image {border-radius: 20px !important;}
Hi @Artez
Let try to add this Custom CSS code:
.multicolumn-list .media--transparent {
border-radius: 20px;
}
