Border Dataset

The Border dataset defines values used for border related styles such as radius, style, and thickness.

Location

Resolved locations:

shilpConfig.values.border.borderRadius
shilpConfig.values.border.borderStyle
shilpConfig.values.border.borderThickness

Theme locations:

shilpConfig.theme.radius
shilpConfig.theme.style
shilpConfig.theme.thickness

Usage

Intent	Theme Key	Description
`@border rounded-*;`	`"radius"`	Border radius
`@border style-*;`	`"style"`	Border style
`@live outline-style-*;`	`"style"`	Outline style
`@border thick-*;`	`"thickness"`	Border thickness
`@live outline-thick-*;`	`"thickness"`	Outline thickness
`@live outline-offset-*;`	`"thickness"`	Outline offset
`@text line-thick-*;`	`"thickness"`	Text decoration line thickness
`@text line-offset-*;`	`"thickness"`	Text decoration line offset

These utilities read values from the theme, which is built from this dataset.

Dataset Structure

The dataset is a nested key–value map of border related tokens to CSS values.

It includes following groups:

radius → border radius values
style → border style values
thickness → border thickness values

See: Border Dataset Reference

Customizing the Dataset

You can extend or override this dataset in your config.

Customize border dataset
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  extend: {
    values: {
      border: {
        //
        radius: {
          // for --radius: 4px;
          "2xl": "calc(var(--radius) * 4)", // 16px
          "3xl": "calc(var(--radius) * 5)", // 20px
          "4xl": "calc(var(--radius) * 6)", // 24px
          "5xl": "calc(var(--radius) * 7)", // 28px
        },
        //
        thickness: {
          8: "8px",
        },
      },
    },
  },
};

export default shilpConfig;

This will make additional border related tokens available through the theme system.

Border Dataset Reference

Border Dataset
const border = {
  // --radius: 4px
  // NOTE: unit of `--radius` wiil be inferred, px --> px, rem --> rem
  radius: {
    0: 0,
    // NOTE: small radius can be added manually
    DEFAULT: "var(--radius)", // 4px
    md: "calc(var(--radius) * 1.5)", // 6px
    lg: "calc(var(--radius) * 2)", // 8px
    xl: "calc(var(--radius) * 3)", // 12px
    // NOTE: always fully rounded untill explicitely set to 0
    full: "calc(infinity * 1px)",
  },

  style: {
    none: "none",
    hidden: "hidden",
    dashed: "dashed",
    dotted: "dotted",
    solid: "solid",
    double: "double",
    groove: "groove",
    ridge: "ridge",
    inset: "inset",
    outset: "outset",
  },

  thickness: {
    0: 0,
    DEFAULT: "1px",
    px: "1px",
    2: "2px",
    3: "3px",
    4: "4px",
  },
};

export default border;