Borders

Border utilities follow a pragmatic philosophy: most borders are 1px solid on specific sides with neutral colors. The system optimizes for this common case while providing thickness and color control when needed.

Adding Borders

Apply 1px solid borders to any combination of sides. The .border class applies to all sides, while side-specific classes target individual edges:

All sides
All sides

.border applies 1px solid border to all sides

Specific sides
Top
Right
Bottom
Left

Classes: .border-t, .border-r, .border-b, .border-l

Multiple sides
Horizontal borders
Vertical borders

Combine classes for multiple sides: .border-t .border-b

Border Thickness

Control border width across all applied borders. Thickness utilities affect every border you've defined, whether all sides or specific edges:

Available widths
0px
1px
2px
4px
8px

Classes: .border-0, .border-1, .border-2, .border-4, .border-8

Thickness applies to all borders
4px top & bottom
2px all sides

The width utility affects all defined borders uniformly

Border Colors

Border colors follow the same palette as backgrounds and text: six vibrant colors with five swatches each, plus an eleven-step neutral scale. Color utilities apply to all defined borders:

Vibrant colors
Red 500
Orange 500
Yellow 500
Green 500
Blue 500
Purple 500

Classes: .border-{color}-{100,300,500,700,900}

Neutral colors

Eleven-step neutral scale from 25 to 900

Invertible semantic borders
Strong
Regular
Soft

Classes: .i-border-strong, .i-border-regular, .i-border-soft

These automatically adapt to light/dark themes and include border-style: solid

Border Opacity

Control border transparency independently from color. Useful for overlays, hover states, and subtle borders:

100%
70%
40%
10%

Classes: .border-opacity-{0,10,20,30,40,50,60,70,80,90,100}

Removing Borders

Remove borders entirely or set width to zero. Useful for responsive scenarios or state changes:

border-none
border-0

.border-none removes border entirely. .border-0 sets width to zero but maintains border-style.

Border Radius

Border radius utilities round corners using a mathematical scale. Based on a 4px base with a gentle 1.5× progression, the scale provides six sizes plus full rounding for pills and circles.

The radius scale
none
xs (2.67px)
sm (4px)
md (6px)
lg (9px)
xl (13.5px)

Classes: .rounded-{none,xs,sm,md,lg,xl}

Full rounding
Pill shape

.rounded-full uses 9999px for perfect circles and pill shapes

When to Use Each Size

xs/sm (2-4px): Subtle rounding for buttons, inputs, badges, table cells
md (6px): The modern default for cards, containers, panels
lg (9px): Pronounced rounding for larger cards, modals, feature boxes
xl (13.5px): Generous rounding for hero sections, large containers
full: Pills, avatars, circular icons, tags

Practical Constraints

Axiom optimizes for the 90% case: same width, same color across chosen sides. For the rare scenario requiring different widths or colors per side (like a 2px blue bottom border with a 1px red left border), use inline styles or custom.css. This pragmatic trade-off keeps the utility layer lean while covering typical usage.