> ## 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 Utilities for Width, Style, Radius, and Color

> AtomicKit's border system covers width, style, radius, and color in one unified set of utilities including directional and corner-specific controls.

AtomicKit's border utilities give you precise control over every edge of an element — from hairline dividers to thick accent bars, sharp corners to fully rounded pills. All four dimensions of the border system (width, style, radius, and color) are designed to be combined into a single, readable class string that maps directly to CSS.

<CardGroup cols={2}>
  <Card title="Border Width" icon="border-all" href="/borders/width">
    Set border thickness on all sides or target individual edges and axes with directional variants like `border-t-*`, `border-x-*`, and more.
  </Card>

  <Card title="Border Style" icon="minus" href="/borders/style">
    Choose how border lines are drawn — `border-solid` for crisp outlines, `border-dashed` for optional framing, or `border-none` to remove a border entirely.
  </Card>

  <Card title="Border Radius" icon="circle" href="/borders/radius">
    Round corners uniformly or target specific sides and individual corners using `rounded-*` utilities, from `rounded-sm` to `rounded-full`.
  </Card>

  <Card title="Border Colors" icon="palette" href="/colors">
    Pair any border with a color utility. Use semantic tokens like `border-primary` for brand accents, or neutral tones like `border-gray` and `border-gray-light`.
  </Card>
</CardGroup>

## Common Patterns

When combining border utilities, you'll reach for a small set of recurring combinations depending on the surface you're styling.

**Soft dividers** — use a light neutral color to separate content without visual weight:

```html theme={null}
<div class="border-1 border-solid border-gray-light">
  <!-- Subtle section separator -->
</div>
```

**Contrasted outlines** — use a mid-weight gray for cards, inputs, and containers that need clear visual boundaries:

```html theme={null}
<div class="border-2 border-solid border-gray rounded-lg">
  <!-- Card with visible edge -->
</div>
```

**Accent borders** — use your primary brand color to draw attention to a selected item, active state, or featured element:

```html theme={null}
<div class="border-2 border-solid border-primary rounded-lg">
  <!-- Featured or selected card -->
</div>
```

## Complete Border Shorthand

A fully-formed border always combines width, style, radius, and color. This is the recommended pattern for any bordered surface in Elementor:

```html theme={null}
<div class="border-2 border-solid border-gray rounded-lg">
  <!-- Card: 2px solid gray border with large rounded corners -->
</div>
```

Breaking down what each class contributes:

| Class          | Role   | Result                                     |
| -------------- | ------ | ------------------------------------------ |
| `border-2`     | Width  | Sets a 2px border (fluid, scales to 2.5px) |
| `border-solid` | Style  | Draws a solid, unbroken line               |
| `border-gray`  | Color  | Applies a neutral mid-gray stroke          |
| `rounded-lg`   | Radius | Rounds all four corners to 8px             |

<Tip>
  Always apply a border style class alongside a border width class. Without `border-solid` (or another style), the browser renders no visible line even when a width and color are set.
</Tip>

## Related Utilities

* [Spacing](/concepts/spacing) — Use padding utilities to control the distance between a border and inner content.
* [Colors](/colors) — Explore the full color token set available for border coloring.