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

# AtomicKit Border Color Utilities for Elementor Elements

> Style borders on Elementor elements with AtomicKit's border-* classes, always combined with border-width and border-style for visible borders.

Border color utilities set the `border-color` property on any Elementor element. Because `border-color` alone won't render a visible border, you must always combine a `.border-*` color class with a border-width utility and a border-style utility — for example, `border-1 border-solid border-gray`. AtomicKit provides structural grays for everyday dividers and outlines, plus six semantic tokens for status-aware and brand borders.

## Available Border Color Classes

| Class                | Hex       |
| -------------------- | --------- |
| `.border-white`      | `#ffffff` |
| `.border-black`      | `#000000` |
| `.border-gray`       | `#6b7280` |
| `.border-gray-light` | `#e5e7eb` |
| `.border-primary`    | `#0740f9` |
| `.border-secondary`  | `#aaebfd` |
| `.border-neutral`    | `#6b7280` |
| `.border-success`    | `#3DC13C` |
| `.border-warning`    | `#F4BB1B` |
| `.border-error`      | `#F13737` |

<Note>
  Border color utilities only affect `border-color`. A visible border also requires a width (e.g., `border-1`) and a style (e.g., `border-solid`). Always apply all three.
</Note>

## Complete Border Examples

Pair the color class with width and style utilities to produce a fully rendered border. The examples below show common patterns from subtle dividers to semantic status outlines.

```html theme={null}
<!-- Soft card divider — gray-light keeps edges unobtrusive -->
<div class="border-1 border-solid border-gray-light background-white">
  <p class="text-gray-dark">Card content</p>
</div>

<!-- Clear input field border — gray reads on white backgrounds -->
<input class="border-1 border-solid border-gray" type="text" placeholder="Enter value" />

<!-- Primary focus or selected state -->
<div class="border-2 border-solid border-primary">
  <p class="text-gray-dark">Selected option</p>
</div>

<!-- Semantic status outlines -->
<div class="border-1 border-solid border-success background-success-l-5 text-success-d-3">
  Payment confirmed
</div>

<div class="border-1 border-solid border-warning background-warning-l-5 text-warning-d-3">
  Action required
</div>

<div class="border-1 border-solid border-error background-error-l-5 text-error-d-3">
  Submission failed — please review the errors above.
</div>

<!-- High-contrast outline on a dark surface -->
<div class="background-black border-1 border-solid border-white text-white">
  Inverted card
</div>
```

## Using Shade Variants

Append `-l-1` through `-l-5` or `-d-1` through `-d-5` to any semantic token to adjust the border intensity. Lighter shades work well for subtle tinted outlines; darker shades add emphasis or simulate a deeper edge.

```html theme={null}
<!-- Soft primary tint border for a hovered card -->
<div class="border-1 border-solid border-primary-l-3 background-primary-l-5">
  Hover state card
</div>

<!-- Deeper error shade for a high-emphasis validation boundary -->
<input class="border-2 border-solid border-error-d-2" type="email" />

<!-- Neutral ramp for layered outline depth -->
<div class="border-1 border-solid border-neutral-l-2">
  Subtle neutral outline
</div>
```

<Tip>
  When combining a semantic border with a matching background fill, use the base token for the border and a light shade (`-l-4` or `-l-5`) for the background. This preserves the color relationship while keeping the fill from overpowering the content.
</Tip>

## Best Practices

* **Always include width and style.** A color class alone does nothing — every border element needs `border-{width}`, `border-{style}`, and `border-{color}` together.
* **Use `.border-gray-light` for soft dividers.** On white or gray-light backgrounds, `border-gray-light` creates a subtle structural edge that doesn't compete with content. Reach for `.border-gray` or `.border-black` when the border needs to read clearly at a glance.
* **Match semantic border colors to their status context.** A `.border-error` outline on an input field reinforces the validation failure; using it for decoration dilutes the signal and confuses users.
* **On dark or colored backgrounds, use white or a light shade variant.** A `.border-gray-light` border disappears on a dark surface — switch to `.border-white` or a light semantic shade (e.g., `.border-primary-l-4`) to keep the edge visible.

## Related

<CardGroup cols={2}>
  <Card title="Background Colors" icon="paintbrush" href="/colors/background-colors">
    Combine border colors with background fills for complete card and panel styles.
  </Card>

  <Card title="Text Colors" icon="font" href="/colors/text-colors">
    Coordinate border and text colors from the same semantic token for cohesive status components.
  </Card>
</CardGroup>