Skip to main content
All CollectionsEditorStylebar
How to Add and Customize Borders for Boxes
How to Add and Customize Borders for Boxes

You can add borders to boxes and customize their color, style, and thickness. Borders are a great way to separate content or add design accents.

Saika avatar
Written by Saika
Updated yesterday

Adding Borders to Boxes

Borders can be customized with various styles, colors, and thickness options. Adding borders helps clarify content sections or enhance your design.

Note: Gradients cannot be applied to borders.

Border Style Options

Thickness

Set the same thickness for all sides or specify different thicknesses for each side (top, bottom, left, right).

Styles

Hover over [Style] in the panel to choose from the following options:

  • Solid line

  • Dashed line

  • Dotted line

  • Double line

Color Options

RGBA & HEX Codes

Specify colors using RGBA values or HEX codes. Switch between these input methods using the button on the right side of the menu.

Tips: What are RGBA and HEX?

  • RGBA: Defines colors using Red (R), Green (G), Blue (B), and Alpha (A) for transparency. For example, rgba(255, 0, 0, 0.5) represents semi-transparent red.

  • HEX: Represents colors in hexadecimal format, such as #FFFFFF for white or #000000 for black.

Screenshot: Switching between RGBA and HEX input

Default Colors

Click the button on the left side of the menu to select from sample solid or gradient colors. You can adjust these colors after selection.

Screenshot: Selecting default colors

My Colors

Frequently used colors can be saved in My Colors. However, note that starting March 13, 2025, new color registrations in My Color will no longer be supported, and the feature will be discontinued by late April 2025. Please use Color Styles instead. Learn more about this change.

Color Picker

Extract colors from anywhere on your screen using the color picker tool. Simply click the icon and select a color to capture its details.

Screenshot: Using the color picker

Transparent (No Fill)

Set the border color to transparent if you want no visible border fill.

Screenshot: Setting a transparent border

Color Styles

Save frequently used colors as Color Styles for easy reuse across your project. This eliminates the need to repeatedly input color codes. Learn how to set up Color Styles.

Screenshot: A list of labeled Color Styles.

How to Add Borders

  1. Select a Box:

    Click on the box you want to add a border to. To select multiple boxes, hold Shift while clicking each box.

Screenshot: Selecting multiple boxes in the editor.

2. Customize the Border:

Hover over [Border] in the style bar at the top of the editor to adjust border placement, style, and color.

Screenshot: Customizing border settings

How to Remove Borders

  1. Select a Box:

    Click on the box with the border you want to remove. To select multiple boxes, hold Shift while clicking each box.

    Screenshot: Selecting multiple boxes in the editor.
  2. Remove the Border:

    Hover over [Border] in the style bar at the top of the editor and set the border thickness to 0. This will remove the border entirely.

    Screenshot: Removing borders by setting thickness to 0

Did this answer your question?