Borders — SXL Studio Docs

Overview

`$type`	Exports as	Value in one line
`border`	Internal (applied)	Composite object: color + width + style
`borderWidth`	Variable (`FLOAT`)	Number or unit string
`borderRadius`	Variable (`FLOAT`)	Number or unit string
`strokeStyle`	Internal (applied)	Dash/cap/join descriptor (string, object, or array)

border and strokeStyle are applied directly to nodes (they are not exported as a standalone variable or style). borderWidth and borderRadius are plain FLOAT variables.

Border

A composite stroke contract. Partial objects are allowed — the plugin fills in the rest.

Key	Type / values	Meaning
`color`	color string or alias	Stroke color
`width`	number / unit string or alias	Stroke width
`style`	`solid`, `dashed`, `dotted`; `none` / `hidden` clears the stroke	Line style
`strokeAlign`	`inside`, `center`, `outside`	Stroke position (aliases: `position`, `borderAlign`)
`strokeStyle`	alias to a `strokeStyle` token, or an inline stroke-style object/string	Dash pattern + caps/joins

JSON
{
  "border": {
    "$type": "border",
    "default": {
      "$value": { "color": "{color.neutral.300}", "width": "{borderWidth.sm}", "style": "solid", "strokeAlign": "inside" }
    }
  }
}

Dashed border — put the dash details in strokeStyle (inline object or a reference to a strokeStyle token):

JSON
{
  "border": {
    "$type": "border",
    "focus": {
      "$value": {
        "color": "#FF6600",
        "width": "2px",
        "style": "dashed",
        "strokeStyle": { "dash": 6, "gap": 4, "strokeCap": "round" }
      }
    }
  }
}

Border Width

Exported as a FLOAT variable with scope STROKE_FLOAT.

Accepted `$value`	Example
Number	`1`
Unit string	`"1px"`, `"0.5rem"`
Alias / math	`"{borderWidth.md}"`

JSON
{ "borderWidth": { "$type": "borderWidth", "sm": { "$value": "1px" }, "md": { "$value": "2px" } } }

Border Radius

Exported as a FLOAT variable with scope CORNER_RADIUS.

Accepted `$value`	Example
Number	`8`
Unit string	`"8px"`, `"1rem"`
Alias / math	`"{borderRadius.lg} * 2"`

JSON
{ "borderRadius": { "$type": "borderRadius", "sm": { "$value": "4px" }, "pill": { "$value": "999px" } } }

Stroke Style

Describes a dash pattern and caps/joins. Applied directly (not a standalone export), and can be referenced from border.strokeStyle.

Accepted `$value`	Example
Style string	`"solid"`, `"dashed"`
Dash array	`[4, 4]` (dash, gap, …)
Object	see keys below
Alias	`"{strokeStyle.dashed}"`

Stroke-style object keys:

Key	Values
`style`	`solid`, `dashed`, `dotted`
`dash`	Dash length (number / string)
`gap`	Gap length (number / string)
`dashCap`	Cap for the dash
`strokeCap` / `endCap`	`butt` / `none`, `round`, `square`
`strokeJoin` / `join`	`miter`, `bevel`, `round`

JSON
{
  "strokeStyle": {
    "$type": "strokeStyle",
    "dashed": { "$value": { "style": "dashed", "dash": 6, "gap": 4, "strokeCap": "round" } }
  }
}

Full example

JSON
{
  "borderWidth": { "$type": "borderWidth", "sm": { "$value": "1px" }, "md": { "$value": "2px" } },
  "borderRadius": { "$type": "borderRadius", "md": { "$value": "8px" } },
  "border": {
    "$type": "border",
    "default": { "$value": { "color": "{color.neutral.300}", "width": "{borderWidth.sm}", "style": "solid", "strokeAlign": "inside" } },
    "focus": { "$value": { "color": "{color.brand.primary}", "width": "{borderWidth.md}", "style": "dashed", "strokeStyle": { "dash": 6, "gap": 4 } } }
  }
}

#Overview

#Border

#Border Width

#Border Radius

#Stroke Style

#Full example