Border Colors

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.

Examples

<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 and 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).

Text Colors

Text colors

Background Colors

Background colors

Getting Started

Concepts

Typography

Layout

Spacing

Sizing

Background

Effects

Filters

Flexbox

Borders

Components

Overview

Examples

Usage Notes

Best practices

Text Colors

Background Colors

​Overview

​Examples

​Usage Notes

​Best practices

​Related utilities

Text Colors

Background Colors

Overview

Examples

Usage Notes

Best practices

Related utilities