Borders

Border utilities for structure, color, radius, and outlines. Use the short directional helpers for common one-pixel borders, or compose width, style, and color separately when you need more control.

Border Utilities

Border utilities are split by responsibility. The br class establishes the border itself, brc-* controls color, and rad-* controls corner rounding.

Basic Borders

The plain br utility creates a 1px solid border. Add a color utility such as brc-red or brc-red-600/50 to make the color explicit.

<!-- Simple border with browser default color -->
<div class="br">Default border</div>

<!-- Border with a css named color -->
<div class="br brc-red">Red border</div>

<!-- Border with tone and alpha -->
<div class="br brc-red-600/50">Subtle red border</div>

Width, Style, and Color

Use brw-*, brst-*, and brc-* when border parts should be controlled independently. Reserved CSS style keywords like dashed, dotted, and double are treated as literal values.

<div class="brw-px brst-solid brc-red">1px solid</div>
<div class="brw-2px brst-dashed brc-red">2px dashed</div>
<div class="brw-1 brst-dotted brc-red">4px dotted</div>

Shorthand Values

When you want to define the full border in one class, write the pieces with underscores in place of spaces. Use hyphen syntax for Maple's variable-aware resolution, or use equal sign syntax when the value should be passed directly to CSS.

Directional Borders

Directional classes apply 1px solid only to the requested side or logical axis. Physical helpers target top, right, bottom, and left. Logical helpers target inline and block directions, which adapt to writing mode.

<!-- Physical directions -->
<div class="brt brtc-red">Top border</div>
<div class="brb brbc-red">Bottom border</div>
<div class="brl brr brc-red">Left and right borders</div>

<!-- Logical directions -->
<div class="brx brc-red">Inline borders</div>
<div class="bry brc-red">Block borders</div>

Border Radius

The rad-* utility maps to border-radius. Numeric values use Maple's spacing scale, string values can resolve to radius variables, and rad-% creates a fully rounded shape.

<div class="rad-0">No radius</div>
<div class="rad-4">Spacing-based radius</div>
<div class="--rad-lg=1.25rem rad-lg">Variable-based radius</div>
<div class="square-16 rad-%">Circle</div>

Corner Radius

Use the corner-specific radius utilities when only one corner should change. They follow the same value rules as rad-*.

<div class="brtlrad-4">top-left</div>
<div class="brtrrad-4">top-right</div>
<div class="brblrad-4">bottom-left</div>
<div class="brbrrad-4">bottom-right</div>

<div class="brtlrad-4 brblrad-4">left</div>
<div class="brtrrad-4 brbrrad-4">right</div>

<div class="brtlrad-4 brtrrad-4">top</div>
<div class="brblrad-4 brbrrad-4">bottom</div>

<div class="brtlrad-4 brbrrad-4">⟍ diagonal</div>
<div class="brtrrad-4 brblrad-4">⟋ diagonal</div>

Outline

Outline utilities mirror the border pattern but map to the CSS outline family. They are useful for focus states because outlines do not take up layout space, and oloff-* controls the distance from the element.

<!-- Complete outline shorthand with 1 px negative offset -->
<button class="ol-2px_solid_red -oloff-px">Outline</button>

<!-- Separate outline parts with 4px offset -->
<button class="olw-2px olst-dashed olc-red oloff-1">Dashed</button>

<!-- Focus state and -6px negative offset -->
<button class="-oloff-1.5 &:focus:ol-px_solid_red">Focus me</button>

Related Properties

Refer to the underlying CSS properties for granular border and outline control.