Style elements with rounded corners

With rounded corners, you can style your content elements to have round borders. Learn in this article how to set rounded corners for all sides at once, or one at a time.

What are rounded corners?

As mentioned above, rounded corners allow you to apply a round border to your elements. As you see in the example below, the "top right" and "bottom left" corners have a round corner, which creates a more dynamic text element.

You can apply rounded corners to these elements:

• Text - Title, Paragraph, and Quote

• Image

• Button

• Hotspot

• Share

• Forms - Foleon native and Marketing Automation Platforms (MAP)

• Column scroll button

• Page scroll button

How to set rounded corners

• All sides at once
  In the element settings, go to Border. With the "All sides at once" toggle on, you can set rounded corners to all sides of the element.
  In the example below, you can see that the text element has rounded corners for every side, with a value of "50".

  💡In the screenshot below, a background color has first been set in "Background". The "Full width" switch needs to be on if you want to make use of rounded corners.

  

• Individual round corners
  There is also the option to individually round the corners one by one. When you toggle off "All sides at once" you will see that the options for the four individual corners will appear.
  As you see in the example below, the "bottom right" corner has a round corner, which creates a more dynamic text element.

  💡 In the screenshot below, a background color has first been set in "Background". The "Full width" switch needs to be on if you want to make use of rounded corners.

  

• Round corners without background color
  In the examples above, the rounded corners have been applied to elements that have a background color set. If you don't have a background color, you can also have a line border with rounded corners. Check out the example below to see what that looks like.