Use Border to add a line around the edges of your element, and Radius to round its corners. Both can be applied uniformly or customized per side or corner for more precise control.

Border

A border is a line drawn around the edges of an element. You can control its width, color, and style, and customize each side independently.

Add a Border

1. Select an element on the page.

2. Go to Right Panel → Style.

3. Click Add next to Border to open the Border panel.

4. Set the Width of the border.

5. Click the color swatch to set the Color.

6. Open the Style dropdown to choose a border style. Available border styles include:
   • None
   • Solid
   • Dashed
   • Dotted
   • Double
   • Groove
   • Ridge
   • Inset
   • Outset

Customize Each Side Individually

By default, the width, color, and style apply to all four sides equally, but you can also customize each side individually:

1. Click the box icon next to the Width, Color, or Style field.

2. This reveals individual controls for each side – Top, Left, Right, and Bottom.

3. Set the width, color, and style for each side as needed.

This way, each side can have its own width, color, and border style independently.

Outline

Outline is similar to Border but is drawn outside the element’s border and does not affect the layout or spacing of surrounding elements. It also has an additional Offset control to set the gap between the outline and the element.

Add an Outline

1. Select an element on the page.

2. Go to Right Panel → Style.

3. Click the plus (+) icon in the Style section and select Outline.

4. Click on the Outline field to expand it.

5. Set the Width.

6. Click the color swatch to set the Color.

7. Open the Style dropdown to choose an outline style. Available outline styles include:
   • None
   • Solid
   • Dashed
   • Dotted
   • Double
   • Groove
   • Ridge
   • Inset
   • Outset

8. Set the Offset to control the gap between the outline and the element.

Radius

Radius rounds the corners of an element. You can apply the same rounding to all corners at once, or set each corner to a different value for asymmetric shapes.

Set Radius

1. Select an element on the page.

2. Go to Right Panel → Style.

3. Enter a value in the Radius field or drag the slide to apply the same rounding to all four corners of your element.

Customize Each Corner Individually

You can also set each corner radius individually: 

1. Click the rounded-box icon next to the Radius field. 

2. This will reveal the four corner controls.

3. Enter a value for each corner as needed to create asymmetric rounding.