Border

Border utilities — width (border-{value}), radius (rounded-{value}), and color (border-{color}-{tone}), stackable on any element.

Example

html
<!-- Set border width, radius and color --> <engine:VisualElement class="border-8 rounded-lg border-red-400"/>

Border Width

Format: border-{value}

ClassProperties
border-0border-width: 0
border-1border-width: 1px
border-2border-width: 2px
border-4border-width: 4px
border-8border-width: 8px
border-12border-width: 12px
border-16border-width: 16px

Border Radius

Format: rounded-{value}

ClassProperties
rounded-noneborder-radius: 0
rounded-smborder-radius: 2px
roundedborder-radius: 4px
rounded-mdborder-radius: 6px
rounded-lgborder-radius: 8px
rounded-xlborder-radius: 12px
rounded-2xlborder-radius: 16px
rounded-3xlborder-radius: 24px
rounded-fullborder-radius: 9999px

Border Color

Format: border-{color}-{tone}

html
<engine:VisualElement class="border-purple-700" /> <engine:VisualElement class="border-red-500" /> <engine:VisualElement class="border-red-500-half" />

The per-ramp border-color classes come from the Essentials theme's Colors/utility-colors.uss (or your own Palette Generator export). The -half suffix means the same tone at 50% opacity — a convention, not shipped by default; see Colors → The -half suffix for the alias to define it yourself.

See also

  • Colors — the --color-{name}-{tone} tokens the border-color classes route into
  • Theme Stack — where to place overrides so package updates don't eat them
  • Size · Layout · Text — the rest of the utility-class set

Settings

Theme

Light

Contrast

Material

Dark

Dim

Material Dark

System

Sidebar(Light & Contrast only)

Light
Dark

Font Family

DM Sans

Wix

Inclusive Sans

AR One Sans

Direction

LTR
RTL