SXL Studio
Tokens

Borders

Borders group token types: Border, Border Width, Border Radius, Stroke Style — stroke contracts, keys, and examples.

The Borders group covers stroke thickness, corner radius, and dash/cap/join styling.

Border (composite)

border is a full stroke contract.

Export: apply-only (applied directly, not exported as Variable/Style).

Border object keys

KeyTypeMeaning
colorstringstroke color (literal or alias)
widthnumber/stringstroke width (literal or alias)
stylestringsolid, dashed, dotted, none, hidden
strokeAlign / position / borderAlignstringinside, center, outside
strokeJoin / joinstringmiter, bevel, round
endCap / endPoint / strokeCapstringbutt/none, round, square
dashCapstringcap for dashed/dotted pattern
dashnumber/stringexplicit dash length
gapnumber/stringexplicit dash gap
strokeStylestringalias to a strokeStyle token (or string style)

Basic example

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

Dashed example with explicit dash/gap

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

If style is none or hidden, strokes are cleared.

Border Width

borderWidth is a simple numeric stroke-width token.

Export: Variable (FLOAT) with scope STROKE_FLOAT.

JSON
{
  "borderWidth": {
    "$type": "borderWidth",
    "none": { "$value": "0px" },
    "sm": { "$value": "1px" },
    "md": { "$value": "2px" },
    "lg": { "$value": "4px" }
  }
}

Border Radius

borderRadius is a simple corner-radius token.

Export: Variable (FLOAT) with scope CORNER_RADIUS.

JSON
{
  "borderRadius": {
    "$type": "borderRadius",
    "none": { "$value": "0px" },
    "sm": { "$value": "4px" },
    "md": { "$value": "8px" },
    "lg": { "$value": "12px" },
    "full": { "$value": "9999px" }
  }
}

Stroke Style

strokeStyle controls stroke pattern/caps/joins.

Export: apply-only (no standalone Figma Variable/Style).

Accepted forms

  1. String / alias:
JSON
{
  "strokeStyle": {
    "$type": "strokeStyle",
    "solid": { "$value": "solid" },
    "dashed": { "$value": "dashed" },
    "dotted": { "$value": "dotted" }
  }
}
  1. Object:
JSON
{
  "strokeStyle": {
    "dash-compact": {
      "$type": "strokeStyle",
      "$value": {
        "style": "dashed",
        "width": "2px",
        "dash": 6,
        "gap": 4,
        "dashCap": "round",
        "endCap": "round",
        "strokeJoin": "round"
      }
    }
  }
}
  1. Reference to another stroke style token from a border object:
JSON
{
  "border": {
    "card": {
      "$type": "border",
      "$value": {
        "color": "{color.neutral.400}",
        "width": "{borderWidth.sm}",
        "strokeStyle": "{strokeStyle.dash-compact}"
      }
    }
  }
}

Full example

JSON
{
  "borderWidth": {
    "$type": "borderWidth",
    "sm": { "$value": "1px" },
    "md": { "$value": "2px" }
  },
  "borderRadius": {
    "$type": "borderRadius",
    "sm": { "$value": "4px" },
    "md": { "$value": "8px" },
    "full": { "$value": "9999px" }
  },
  "strokeStyle": {
    "$type": "strokeStyle",
    "focus-dash": {
      "$value": {
        "style": "dashed",
        "dash": 6,
        "gap": 4,
        "dashCap": "round"
      }
    }
  },
  "border": {
    "default": {
      "$type": "border",
      "$value": {
        "color": "{color.neutral.300}",
        "width": "{borderWidth.sm}",
        "style": "solid"
      }
    },
    "focus": {
      "$type": "border",
      "$value": {
        "color": "#FF6600",
        "width": "{borderWidth.md}",
        "strokeStyle": "{strokeStyle.focus-dash}",
        "strokeAlign": "outside"
      }
    }
  }
}