A border is a nice way to add some structure to your event page. Borders can be applied to Elements, Containers, or Blocks. Most commonly, a border will be applied around the outside of a button, so we’ll use that Element for this demo.

Inside the border accordion tab are two main options. Let’s discuss the style dropdown first!

Clicking into the style dropdown gives you access to applying a solid, dotted, or dashed border to your Element or Block. Once a style is selected, the color of the border and thickness can be customized.

As an added bonus, you do NOT need to have an equal thickness of a border on all sides. In fact, you don't even need to have all sides activated. If there is no background color applied to the button, it will serve more as an underline style border.

For now, we'll reapply the background color to the button, and keep a uniform border around all sides.

As a finishing touch, a designer can then round the edges of their Element or Block by inserting a numerical value into the Radius input field.

Just like with fonts, width and height, and margin/padding, you have the option to choose which form of measurement you’d like the radius to take. Attempting to create a completely round button? Try using 100 pixels.

One last note: You do not need to have an actual border on your Element or Block for the rounded edges to take effect. Experiment with the radius input without even touching the border portion of the tab.

Everything in this tab can also be updated in the mobile and tablet workspaces as well. So, as we click into the mobile workspace, if you'd prefer your button to be perfectly square instead of rounded, feel free to take the border-radius off on mobile. Now when we click back to desktop, we see that the button remains round in this workspace.

To access articles on the other accordion tabs visit the links below:

The Background Tab

The Font Tab

The Width/Height Tab

The Margin/Padding Tab

The Display Tab

The Positioning Tab

The Properties Tab