A user wanted to round the corners of collapsible content sections on their Shopify store (using the Taste theme) to match the styling of buttons below them.
Initial Solution:
base.css file successfully rounded the collapsible content corners using border-radius: 50px !important;Extended Request:
Final Solution Provided:
CSS snippets targeting multiple sections:
.collapsible-content__media with overflow hidden.multicolumn-card and .content-container classesThe solution was confirmed working. Screenshots were shared showing the before/after results and code implementation.
Hi all,
I was wondering if I could round out the corners of my collapsible content section to make it look more like the button underneath it. They are rectangles right now
https://69d88d-2.myshopify.com/pages/events password “etrawn”, using theme Taste
Thank you
Hi @kimi1
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
.accordion.content-container.color-scheme-ea700ab0-737f-41b4-90af-2b6ed27bdd36.gradient {
border-radius: 50px !important;
}
Result:
Best,
Liz
Amazing, that worked! Thanks so much!
Could I also ask if it’s possible to do the same with all other sections? i.e., banner image text, multicolumns, shop collections and product photos, image text, email sign-up page and email in footer?
yes, ofcourse
Please let us know if our reply is helpful by marking it as a Solution!
Thank you Liz, would you have the code to apply rounded corners to all sections?
Thank you
ohh, It is not possible for all because each section has its own class and id
Hmm I see, would I need to input the code for each section then?
yes, have to edit code for each section
do you know the code for each section?
.collapsible-content__media {
border-radius: 50px !important;
overflow: hidden !important;
}
.collapsible-content__media img {
border-radius: 50px !important;
}
.multicolumn-card, .content-container {
border-radius: 50px !important;
}
wow thanks! works great
