How can rounded corners be added to a Lottie animation block in Webflow?

Published on

September 22, 2023

To add rounded corners to a Lottie animation block in Webflow, you can follow these steps:

Select the Lottie animation block: Click on the Lottie animation block on your Webflow canvas or in the Navigator panel to select it.
Open the element settings: In the right-hand panel, click on the Settings tab (gear icon) to access the element's settings.
Access the styling options: Within the element settings, look for the Style section. Click on the "Open the style" button to reveal additional styling options.
Add rounded corners using border-radius: In the Style section, scroll down to the Border section. By default, the border setting is set to "None." You will find different options like border width, border style, and border color.
Enable the border-radius property: To add rounded corners, you need to set a value for the border-radius property. Enter a value for the border-radius property to define the amount of rounding you desire. You can use a specific

Pixel value: e.g., 10px or 20px,
Percentage value: e.g., 50% (for a perfect circle), or
em value: e.g., 1em, where 1 em is equivalent to the current font size.
You can adjust this value to achieve the desired amount of rounding. Webflow provides a visual display of the rounded corners on the Lottie animation block in real-time.

Customize other styling properties: You can also customize other styling properties, such as border color, border width, and border style to further enhance the appearance of the Lottie animation block.
Preview and publish: Once you are satisfied with the rounded corners on your Lottie animation block, preview it within the Webflow Designer or publish your site to see the rounded corners in action on the live site.

By following these steps, you can easily add rounded corners to a Lottie animation block in Webflow, enhancing the visual appeal of your website.

Additional questions: