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

​
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