$type: "border" composite

Border Token

Border is a composite token type that groups together all properties needed to describe a border. The $value is an object containing three required fields: color (a color value), width (a dimension value), and style (a strokeStyle value or string keyword). This corresponds to the CSS border shorthand property.

Value Format

A composite object with color, width, and style fields

Composite Fields

Field	Type	Required	Description
color	color	yes	The border color as a CSS color value
width	dimension	yes	The border width (e.g. '1px')
style	strokeStyle	yes	The border style (e.g. "solid", "dashed")

When to Use

Use border tokens for consistent borders on cards, inputs, dividers, and any other UI element with a border. A single border token captures the full intent — color, width, and style — so components stay in sync even when the design language evolves.

Valid Example

Valid JSON .json

{
  "border": {
    "default": {
      "$value": {
        "color": "#e5e7eb",
        "width": "1px",
        "style": "solid"
      },
      "$type": "border",
      "$description": "Default UI border"
    },
    "focus": {
      "$value": {
        "color": "#3b82f6",
        "width": "2px",
        "style": "solid"
      },
      "$type": "border"
    }
  }
}

Paste the example above into the validator to test it yourself.

Open Validator

Related Token Types