How can I make background divs into perfect circles in Webflow?

Published on
September 22, 2023

To make background divs into perfect circles in Webflow, you can follow these steps:

  1. Select the div that you want to turn into a circle.
  2. In the style panel on the right-hand side, click on the "Add" button next to the "Background" property.
  3. In the dropdown menu that appears, select "Color" or "Gradient" depending on your desired background style.
  4. Once you've set your background color, scroll down to the "Border" section.
  5. Click on the "Add" button next to "Border Radius".
  6. In the dropdown menu that appears, select "Circle". This will automatically set the border radius of the div to 50%.
  7. If you want to adjust the size of the circle, you can change the width and height of the div in the "Size & Position" section of the style panel.
  8. You can also adjust the border width and color in the "Border" section if desired.
  9. Preview your changes to see the div transformed into a perfect circle.

By following these steps, you can easily create background divs that are in the shape of perfect circles in Webflow.