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
#FFFFFFfor white or#000000for black.
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.
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.
Transparent (No Fill)
Set the border color to transparent if you want no visible border fill.
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.
How to Add Borders
Select a Box:
Click on the box you want to add a border to. To select multiple boxes, hold
Shiftwhile clicking each box.
2. Customize the Border:
Hover over [Border] in the style bar at the top of the editor to adjust border placement, style, and color.
How to Remove Borders
Select a Box:
Click on the box with the border you want to remove. To select multiple boxes, hold
Shiftwhile clicking each box.
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.