Border

Border

In a nutshell

The Border property adds a solid outline around an element. You can choose the border variation, control its thickness through preset values, and set its color independently to define the element's visual boundary.

1. Description

Border applies a solid outline to the outer edge of an element's*link to elements page* boundary. It visually separates the element from its surroundings, adds structure, and draws attention to a particular container.

.   

2. Possible values

The Border of an element is controlled through the thickness, type, and color.

2.1. Thickness

Border thickness allows preset values in pixels from 1 to 5. While smaller values are ideal for subtle dividers and input field outlines, larger values cater to bold frames and distinct separation.

2.2. Type

The border type lets you choose from three different border variations, solid, dotted, and dashed.

2.3. Color

The Color property is available after a thickness value other than None is selected.

Option Description
Library
Choose from the preset colors available in the design token library.
Standard Pick from Document Colors, Standard colors, or Monochrome colors.
Custom Enter a hex or RGB code directly for a precise color value.
NotesNote: The same border thickness, type, and color are applied to all four sides uniformly.

3. Visual reference


4. How to set border?

  1. Select an element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
  2. Navigate to the Style tab on the right pane. Click and open the Border accordion within the pane.
  3. Click the thickness dropdown and select a library value or a custom value from 1, 2, 3, 4, or 5.

  4. Select the Type dropdown to choose the border variation from Solid, Dashed, and Dotted.
  5. Click the Color dropdown and choose a border color from:
    1. Library tab: Select a preset color variant from the design token library.
    2. Standard tab: Choose from Document Colors, Standard colors, or Monochrome colors.
    3. Custom tab: Enter a hex or RGB code directly.
  6. Click Save in the top right corner to ensure the changes are retained.

5. Applicable elements

Border is available on the primitives and composite elements listed below. Apart from this, it is also listed as a style property in all presets.

  1. Text
  2. Image
  3. Icon
  4. Canvas
  5. H-Stack
  6. V-Stack
  7. Menu
  8. Tab
  9. Button
  10. Portal Forms
  11. Embed

6. Points to note

  1. Border and Corner Radius relationship - When Corner Radius*link to Corner Radius doc* is applied alongside a border, the border follows the rounded shape.

Explore other properties

  1. Alignment
  2. Layout
  3. Padding
  4. Margin
  5. Font
  6. Background
  7. Corner Radius
  8. Shadow
  9. Opacity
  10. Icon and image styling
  11. Stack styling
  12. Tab styling