Rounder collapsible row edges

[TrendBlend]

Hello, how can I make my collapsible row edges smoother like this:

Instead of my current URL: Controllable LED Curtain – TrendBlend

Thanks in advance!!

[LizHoang]

Hi @TrendBlend 

You can follow the instruction here to round your collapsible row:

1. Go to Shopify > Theme > Customize > open Custom CSS

2. Copy and paste this code to the section > Save

.collapsible-row-layout .accordion {
    border-radius: 30px;
}

 here is the result : 

[TrendBlend]

Hello @LizHoang, it looks good. Do you also know how I can make the GIF next to it also have round edges, like my product pictures have?

[TrendBlend]

And how can I make the GIF next to it also have round edges, like my product pictures have?

[LizHoang · Accepted solution]

Hi @TrendBlend 

You can add this code to the Custom CSS to round gif: 

.media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    border-radius: 20px;
}

Here is the result : 

[TrendBlend]

Hello @LizHoang I appreciate your help!! I have one more question, is it possible to place the middle of the collapsible rows, next to the middle of the image on desktop so it just looks slightly better. Image for explanation (I want the green part (middle of each object) to connect).

[LizHoang]

Hi @TrendBlend 

You can try to add this code to the Custom CSS section: 

.collapsible-row-layout .accordion {
    top: 16px;
}

Here is the result: