Skip to main content
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

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

​
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. 
<!-- 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. 
<!-- 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>
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.

​
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

Background Colors

Combine border colors with background fills for complete card and panel styles.

Text Colors

Coordinate border and text colors from the same semantic token for cohesive status components.