Skip to main content

​
Overview

Control border width, style, radius, and color with comprehensive border utilities. Borders help define element boundaries, create visual separation, and add emphasis to important content. Use border utilities to create clear visual hierarchy, separate content sections, and add decorative accents. All border utilities work seamlessly with Elementor v4’s styling system.

Width

Static and fluid border width utilities

Style

Border style utilities: solid, dashed, and none

Radius

Border radius utilities for rounded corners

​
Quick Start

​
Basic Borders

<!-- Simple border -->
<div class="border border-gray p-4 rounded">Gray border</div>

<!-- Thick border -->
<div class="border-2 border-blue p-4 rounded-lg">Blue accent border</div>

<!-- No border -->
<div class="border-0 p-4 bg-gray-light">No border</div>

​
Common Patterns

  • Cards: Use subtle borders with rounded corners
  • Form Inputs: Border states for normal, focus, and error
  • Accent Borders: Use thick colored borders for emphasis
  • Buttons: Combine borders with background colors for variants

Colors

Color utilities for border colors

Spacing

Padding utilities for border spacing

Layout

Display utilities for border behavior

Components

Pre-built components with borders