---
title: "Border Dataset"
description: "Border property values for styling borders."
keywords: ["values", "border", "style", "width", "css"]
---

# Border Dataset

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

---

<section>

## 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`

</section>

<section>

## 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.

</section>

<section>

## 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](#border-dataset-reference)

</section>

<section>

## Customizing the Dataset

You can extend or override this dataset in your config.

```js title="Customize border dataset"
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.

</section>

<section>

## Border Dataset Reference

```js title="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;
```

</section>