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

# Border Width Scale: All Sides, Directional, and Axis

> Set element border widths in Elementor using AtomicKit's border-* scale, with directional and axis variants for one-sided and paired edge control.

AtomicKit's border width scale gives you eight steps from zero to 20px, each mapped to a CSS custom property that fluid-scales with your layout. You can apply a width to all four sides at once or target a single edge, a pair of parallel edges, or any directional combination your design requires.

## Border Width Scale

Every border width class sets `border-width` on all four sides of the element. The values are fluid — they scale proportionally between the base and max sizes listed below.

| Class        | Value Range    | CSS Property                     |
| ------------ | -------------- | -------------------------------- |
| `.border-0`  | 0              | `border-width: 0`                |
| `.border-1`  | 1px → 1.25px   | `border-width: var(--border-1)`  |
| `.border-2`  | 2px → 2.5px    | `border-width: var(--border-2)`  |
| `.border-4`  | 4px → 5px      | `border-width: var(--border-4)`  |
| `.border-8`  | 8px → 10px     | `border-width: var(--border-8)`  |
| `.border-10` | 10px → 12.5px  | `border-width: var(--border-10)` |
| `.border-15` | 15px → 18.75px | `border-width: var(--border-15)` |
| `.border-20` | 20px → 25px    | `border-width: var(--border-20)` |

<Note>
  Border widths use CSS custom properties (`var(--border-*)`) under the hood. This means you can override any value globally by redefining the variable in your theme's custom CSS, without touching individual elements.
</Note>

## Directional Variants

When you need to target only one side or two parallel sides, use the directional and axis prefix variants. These follow the same numeric scale as the all-sides classes.

### Single-Side Prefixes

| Prefix       | Side   | Example Class |
| ------------ | ------ | ------------- |
| `border-t-*` | Top    | `border-t-2`  |
| `border-r-*` | Right  | `border-r-4`  |
| `border-b-*` | Bottom | `border-b-1`  |
| `border-l-*` | Left   | `border-l-8`  |

### Axis Prefixes

| Prefix       | Sides        | Example Class |
| ------------ | ------------ | ------------- |
| `border-x-*` | Left + Right | `border-x-2`  |
| `border-y-*` | Top + Bottom | `border-y-1`  |

Typical suffixes for all directional variants: `1`, `2`, `4`, `8`.

## Code Examples

**All sides — standard card or input border:**

```html theme={null}
<div class="border-2 border-solid border-primary rounded-lg">
  <!-- Card with a 2px primary-colored border on all sides -->
</div>
```

**Left side only — accent bar or vertical divider:**

```html theme={null}
<div class="border-l-4 border-solid border-primary">
  <!-- Blockquote-style left accent bar -->
</div>
```

**Horizontal axis — left and right edges only:**

```html theme={null}
<div class="border-x-2 border-solid border-gray">
  <!-- Element with borders only on left and right edges -->
</div>
```

**Bottom border only — underline-style section heading:**

```html theme={null}
<div class="border-b-1 border-solid border-gray-light">
  <!-- Heading with a light underline separator -->
</div>
```

## Best Practices

* Use `border-1` and `border-2` for most UI surfaces — cards, inputs, and containers rarely need anything heavier.
* Reserve `border-4` and above for decorative accent treatments, progress indicators, or bold graphic elements.
* Always pair a width class with `border-solid` (or another style class) and a color class. Width alone produces no visible result.
* Use directional variants (`border-l-*`, `border-b-*`) when you only want a single edge visible — for example, a left accent bar on a callout or a bottom divider under a section heading.
* Use `border-0` to explicitly remove a border that might be inherited or set by Elementor's default widget styles.

## Related Utilities

* [Border Style](/borders/style) — Define whether borders are solid, dashed, or removed.
* [Border Radius](/borders/radius) — Round the corners of bordered elements.
* [Border Colors](/colors/border-colors) — Apply color tokens to complete the border definition.