How can I control the rounding/un-rounding of corners in a Webflow accordion when it opens and closes?
TL;DR
- Apply border-radius to the first and last accordion items for the closed state to round top and bottom corners.
- Use Webflow interactions triggered on click to dynamically adjust or remove border-radius for open/closed states, ensuring contents visually join seamlessly.
- Set overflow: hidden and adjust z-index to manage layering and prevent visual overlap issues.
To control corner rounding in a Webflow accordion, you need to apply or remove border-radius styles based on the accordion's open or closed state.
1. Set Initial Border Radius
- Select your accordion wrapper, header, or individual panel depending on where you want corner rounding.
- Apply your desired border-radius (e.g., 8px for top corners).
- Typically, only the first and last items in an accordion need rounded corners to appear seamless when closed.
2. Style the Open State
- Select the accordion item or content wrapper that expands when open.
- Use an "Open" combo class or set a Webflow interaction that triggers on open/close.
- Remove or adjust the border-radius:
- On open, remove bottom corner rounding from header or top rounding from the content section so they visually join.
- On close, reapply the appropriate rounding.
Example:
- For a single accordion item:
- Closed state: Header has border-radius: 8px 8px 0 0.
- Open state: Header has border-radius: 8px 8px 0 0, and content has border-radius: 0 0 8px 8px.
- Transition between them on click using Webflow interactions.
3. Use Webflow Interactions
- Go to Interactions panel > Element Trigger > Mouse Click (Tap) on the accordion header.
- Add an animation:
- On 1st Click: Add interaction to expand content and adjust border-radius styles.
- On 2nd Click: Collapse content and reset border-radius.
Use the "Style" option inside the interaction to change border-radius dynamically.
4. Consider Overflow and Z-Index
- If panel content overlays or expands outside the parent, ensure overflow: hidden is set on the appropriate container.
- For stacked accordions, adjust layering (z-index) to make opened items appear above the next item below, preventing border clashes.
Summary
To control accordion corner rounding in Webflow, use conditional border-radius styles and interactions to set different appearances for open and closed states. Use the Style panel and interactions to modify radius dynamically, creating a seamless visual flow when content expands or collapses.