Borders

Border utilities provide easy control over border appearance, width, style, and radius.

Usage Pattern

Border utilities follow the pattern b{type}-{value}

Prefix	Description	Options
bw	Border Width	0 to 5 (increasing thickness)
bs	Border Style	dotted, dashed, solid
br	Border Radius	0 to 4 (increasing radius), 100p (circular), pill (rounded), directional
bd	Border Display	a (all), b (bottom), t (top), r (right), l (left), or with n prefix

Direction Abbreviations

Xtyle CSS uses consistent abbreviations for directions:

• a - All sides
• t - Top side
• r - Right side
• b - Bottom side
• l - Left side

No-Border Utilities

Adding n prefix to border display removes borders:

• bd-n - No border on any side
• bd-nt - No border on top
• bd-nr - No border on right
• bd-nb - No border on bottom
• bd-nl - No border on left

Examples

<!-- Border width and style -->
<div class="bd-a bw-2 bs-solid">Box with medium-thick solid border</div>

<!-- Border style only -->
<div class="bd-a bs-dotted">Box with dotted border</div>

<!-- Pill-shaped element -->
<div class="bd-a br-pill bs-solid">Pill-shaped border</div>

<!-- Mixed border styles -->
<div class="bd-t bd-b bw-1 bs-dashed">Dashed top and bottom borders</div>

<!-- Removing specific borders -->
<div class="bd-a bd-nt bs-solid">Borders on all sides except top</div>

<!-- Border radius on specific corners -->
<div class="br-t bs-solid bd-a">Rounded top corners only</div>

All Available Classes

Border Width

• bw-0, bw-1, bw-2, bw-3, bw-4, bw-5

Border Style

• bs-dotted, bs-dashed, bs-solid

Border Radius

• Size: br-0, br-1, br-2, br-3, br-4
• Special: br-100p (circle), br-pill (rounded pill)
• Directional: br-t, br-r, br-b, br-l

Border Display

• Show: bd-a, bd-t, bd-r, bd-b, bd-l
• Hide: bd-n, bd-nt, bd-nr, bd-nb, bd-nl