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

> Border-color utilities for structural grays and six semantic tokens—primary, secondary, neutral, success, warning, error—with optional l-5…d-5 ramps.

export const BorderColorsDemo = () => {
  const swatches = [{
    cls: "border-black",
    hex: "#000000"
  }, {
    cls: "border-white",
    hex: "#ffffff"
  }, {
    cls: "border-gray",
    hex: "#6b7280"
  }, {
    cls: "border-primary",
    hex: "#0740f9"
  }, {
    cls: "border-secondary",
    hex: "#aaebfd"
  }, {
    cls: "border-neutral",
    hex: "#6b7280"
  }, {
    cls: "border-success",
    hex: "#3DC13C"
  }, {
    cls: "border-warning",
    hex: "#F4BB1B"
  }, {
    cls: "border-error",
    hex: "#F13737"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-3 sm:grid-cols-4 gap-4">
          {swatches.map(s => <div key={s.cls} className="flex flex-col items-center gap-2">
              <div style={{
    border: "4px solid " + s.hex,
    borderRadius: "0.5rem",
    width: "100%",
    aspectRatio: "1",
    background: "var(--demo-panel)"
  }} />
              <code style={{
    fontSize: "0.65rem",
    color: "var(--demo-fg-subtle)",
    fontFamily: "monospace"
  }}>.{s.cls}</code>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Use border color utilities for dividers, frames, and semantic outline states.

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

Semantic tokens also support `.border-{token}-l-5` through `.border-{token}-d-5`; hex steps match the [Color Palette](/concepts/colors#color-palette).

## Examples

<BorderColorsDemo />

```html theme={null}
<div class="elementor-element border-1 border-solid border-gray padding-4 rounded">Gray</div>
<div class="elementor-element border-1 border-solid border-gray-light padding-4 rounded">Light gray</div>
<div class="elementor-element border-1 border-solid border-primary padding-4 rounded">Primary</div>
<div class="elementor-element border-1 border-solid border-neutral padding-4 rounded">Neutral</div>
<div class="elementor-element border-2 border-solid border-black padding-4 rounded">Black</div>
```

## Usage Notes

Classes set `border-color`. Always pair them with [width](/borders/width) and [style](/borders/style), such as `border-1 border-solid border-gray`.

## Best practices

* Use **gray-light** for soft dividers; **gray** / **black** when edges must read clearly.
* Always set width and style with color (`border-1 border-solid border-gray`).

## Related utilities

<CardGroup cols={2}>
  <Card title="Text Colors" icon="highlighter" href="/colors/text-colors">
    Text colors
  </Card>

  <Card title="Background Colors" icon="image" href="/colors/background-colors">
    Background colors
  </Card>
</CardGroup>