> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Border Width

> The bundled border-width scale from `border-0` through `border-20`.

export const BorderWidthDemoAxes = () => {
  const samples = [{
    cls: "border-x-4",
    style: {
      borderLeftWidth: "4px",
      borderRightWidth: "4px"
    }
  }, {
    cls: "border-y-4",
    style: {
      borderTopWidth: "4px",
      borderBottomWidth: "4px"
    }
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
          {samples.map(item => <div key={item.cls} className="flex flex-col items-center gap-3">
              <span className="tw-label">{item.cls}</span>
              <div style={{
    width: "4rem",
    height: "4rem",
    borderStyle: "solid",
    borderColor: "#5742f5",
    borderWidth: 0,
    background: "rgba(87, 66, 245, 0.06)",
    boxShadow: "inset 0 0 0 1px rgba(148, 163, 184, 0.24)",
    ...item.style
  }} />
            </div>)}
        </div>
      </div>
    </div>;
};

export const BorderWidthDemoSides = () => {
  const samples = [{
    cls: "border-t-4",
    style: {
      borderTopWidth: "4px"
    }
  }, {
    cls: "border-r-4",
    style: {
      borderRightWidth: "4px"
    }
  }, {
    cls: "border-b-4",
    style: {
      borderBottomWidth: "4px"
    }
  }, {
    cls: "border-l-4",
    style: {
      borderLeftWidth: "4px"
    }
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
          {samples.map(item => <div key={item.cls} className="flex flex-col items-center gap-3">
              <span className="tw-label">{item.cls}</span>
              <div style={{
    width: "4rem",
    height: "4rem",
    borderStyle: "solid",
    borderColor: "#5742f5",
    borderWidth: 0,
    background: "rgba(87, 66, 245, 0.06)",
    boxShadow: "inset 0 0 0 1px rgba(148, 163, 184, 0.24)",
    ...item.style
  }} />
            </div>)}
        </div>
      </div>
    </div>;
};

export const BorderWidthDemoBasic = () => {
  const samples = [{
    cls: "border-1",
    style: {
      borderWidth: "1px"
    }
  }, {
    cls: "border-2",
    style: {
      borderWidth: "2px"
    }
  }, {
    cls: "border-4",
    style: {
      borderWidth: "4px"
    }
  }, {
    cls: "border-8",
    style: {
      borderWidth: "8px"
    }
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
          {samples.map(item => <div key={item.cls} className="flex flex-col items-center gap-3">
              <span className="tw-label">{item.cls}</span>
              <div style={{
    width: "4rem",
    height: "4rem",
    borderStyle: "solid",
    borderColor: "#5742f5",
    borderWidth: 0,
    background: "rgba(87, 66, 245, 0.06)",
    boxShadow: "inset 0 0 0 1px rgba(148, 163, 184, 0.24)",
    ...item.style
  }} />
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Use border-width utilities to control how subtle or emphatic a border feels.

Bundled widths use CSS variables such as `var(--border-1)` so the scale stays tokenized; for context on variables in this stack, see [Variables](/concepts/variables).

| Class        | Value          | CSS                | Usage                    |
| ------------ | -------------- | ------------------ | ------------------------ |
| `.border-0`  | 0              | `border-width: 0;` | No border                |
| `.border-1`  | 1px → 1.25px   | `var(--border-1)`  | Subtle separation        |
| `.border-2`  | 2px → 2.5px    | `var(--border-2)`  | Standard border          |
| `.border-4`  | 4px → 5px      | `var(--border-4)`  | Accent framing           |
| `.border-8`  | 8px → 10px     | `var(--border-8)`  | Strong decorative border |
| `.border-10` | 10px → 12.5px  | `var(--border-10)` | Heavy framing            |
| `.border-15` | 15px → 18.75px | `var(--border-15)` | Display framing          |
| `.border-20` | 20px → 25px    | `var(--border-20)` | Maximum emphasis         |

| Pattern                                                                        | Covers                      | Typical suffixes                          |
| ------------------------------------------------------------------------------ | --------------------------- | ----------------------------------------- |
| `.border-{size}`                                                               | All four sides              | `0`, `1`, `2`, `4`, `8`, `10`, `15`, `20` |
| `.border-t-{size}`, `.border-r-{size}`, `.border-b-{size}`, `.border-l-{size}` | One side only               | `1`, `2`, `4`, `8`                        |
| `.border-x-{size}`, `.border-y-{size}`                                         | Horizontal or vertical pair | `1`, `2`, `4`, `8`                        |

## Basic Example

Use `border-{size}` to set the same width on all four sides.

<BorderWidthDemoBasic />

```html theme={null}
<div class="border-1 border-solid border-primary"></div>
<div class="border-2 border-solid border-primary"></div>
<div class="border-4 border-solid border-primary"></div>
<div class="border-8 border-solid border-primary"></div>
```

## Individual Sides

Use `border-t-*`, `border-r-*`, `border-b-*`, and `border-l-*` when only one edge needs emphasis.

<BorderWidthDemoSides />

```html theme={null}
<div class="border-t-4 border-solid border-primary"></div>
<div class="border-r-4 border-solid border-primary"></div>
<div class="border-b-4 border-solid border-primary"></div>
<div class="border-l-4 border-solid border-primary"></div>
```

## Horizontal and Vertical Sides

Use `border-x-*` and `border-y-*` to apply the same width to a pair of edges.

<BorderWidthDemoAxes />

```html theme={null}
<div class="border-x-4 border-solid border-primary"></div>
<div class="border-y-4 border-solid border-primary"></div>
```

## Best Practices

* Use `border-1` and `border-2` for most UI surfaces.
* Use side-specific widths for tabs, dividers, and timeline markers where only one edge should stand out.
* Use `border-x-*` and `border-y-*` for split layouts and framed media without over-specifying each side.
* Use `border-4` and above sparingly for accents, highlights, and decorative frames.
* Pair width utilities with explicit style and color helpers such as `.border-solid` and `.border-gray`.
* Keep border widths consistent across similar components.