How can I control the rounding/un-rounding of corners in a Webflow accordion when it opens and closes?

To control the rounding (or un-rounding) of corners of an accordion in Webflow when it opens and closes, you can utilize custom code or interactions.

Here's how you can achieve this using interactions:

1. Select the accordion element and navigate to the Interactions panel.

2. Create two interactions: one for when the accordion is open and one for when it is closed.

3. For the open interaction, set the initial state of the accordion to have rounded corners. You can do this by adjusting the border-radius property in the Style tab. Choose the appropriate value to achieve the desired level of rounding.

4. Next, add a new step to the open interaction. In this step, adjust the border-radius property once again, but this time, set it to have no rounding (0 value). You need to make sure this step triggers after the accordion has finished opening (e.g., using a delay or a specific trigger).

5. Repeat the same steps for the close interaction. Set the initial state of the accordion to have no rounding, and then add a step with the desired border-radius to create rounded corners.

Remember to preview the interactions to ensure they are working as expected. Fine-tuning may be necessary based on the design and specific requirements of your accordion.

If you prefer using custom code, you can achieve similar results by targeting the accordion elements and manipulating the CSS properties using JavaScript or the Webflow's built-in script editor. However, it's important to note that custom code implementation requires an understanding of JavaScript and can be more advanced for some users.

Regardless of the method you choose, always remember to test your implementation on different devices and screen sizes to ensure that the rounding/un-rounding of corners behaves consistently and as intended.