Skip to main content
Borders overview cover

​
Overview

Border utilities cover width, style, radius, and color in one system, including side-specific border widths and directional corner rounding.

Width

Bundled border-width scale from border-0 through border-20

Style

Border style utilities: solid, dashed, and none

Radius

Border radius utilities for rounded corners

Border Colors

Bundled color utilities for soft, neutral, and accent borders

​
Quick Start

<div class="elementor-element border-1 border-solid border-gray p-4 rounded">
  Gray border
</div>
<div class="elementor-element border-2 border-solid border-primary p-4 rounded-lg">
  Blue accent border
</div>
<div class="elementor-element border-l-4 border-solid border-primary p-4 rounded-r-lg">
  Side accent border
</div>
<div class="elementor-element border-0 border-none p-4 bg-gray-light rounded">
  No border
</div>

​
Common Patterns

  • Use border-gray-light for soft section and card separation.
  • Use border-gray or border-black when structure needs more contrast.
  • Use border-primary for the main bundled accent border.
  • Use side-specific widths and directional rounding for tabs, panels, and emphasized edges.
  • Keep width, style, color, and radius explicit in markup for clarity.

Colors

Color utilities for border colors

Spacing

Padding utilities for internal border spacing

Layout

Layout utilities used with bordered surfaces