How can I add a radius to collapsible content's inner rows in CSS?

[hostilearth]

Hi. Can someone please help me add a radius to the edges of the collapsible content's inner rows? I poked around CSS for a while without any success.

[LuffyOnePiece · Accepted solution]

Hi @hostilearth,

Add This Css in your Edit Code > base.css File

.product__accordion .accordion summary {
    border-radius: 5px;
}

If this doesnot wok, please share preview url of the store.

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[hostilearth]

For my specific case .accordion { } worked. I just drew a blank on it being called an accordion. Thank you.

[suyash1]

@hostilearth - can you please share this page link?

[PageFly-Garcia]

Hi @hostilearth based on your image I believe that layout is an accordion element.

If your theme doesn't support this feature, you might need to consider hiring a developer to implement it for you. Alternatively, you could use a page builder app that allows you to add such elements directly into the editor without the need for coding. Then, you can drag the section from the page builder app back into your theme. Some page builder apps that could help include Shogun, PageFly ... Most of them have free plan.

Here is an example from template from PageFly:

Hope it helps! 

Cheers,
Garcia