Border color

Border color utilities set the border color using semantic tokens. For border width utilities, see Border width.

Quick reference

Class	Styles
af-border-default	border-color: var(--af-color-border)
af-border-muted	mixed border color (subtle)
af-border-focus	border-color: var(--af-focus-ring-color)
af-border-strong	border-color: var(--af-color-border-strong)
af-border-primary	border-color: var(--af-color-primary)
af-border-success	border-color: var(--af-color-success)
af-border-danger	border-color: var(--af-color-danger)
af-border-warning	border-color: var(--af-color-warning)
af-border-info	border-color: var(--af-color-info)

Examples

Border intents

Primary border

Danger border

<div class="af-border af-border-primary af-radius-md af-p-sm">
  Primary border
</div>
<div class="af-border af-border-danger af-radius-md af-p-sm">
  Danger border
</div>

Available classes

• af-border-default - Default border color
• af-border-muted - Muted border color
• af-border-focus - Focus border color
• af-border-strong - Strong border color
• af-border-primary - Primary intent border
• af-border-success - Success intent border
• af-border-danger - Danger intent border
• af-border-warning - Warning intent border
• af-border-info - Info intent border

Responsive variants

All border color utilities support responsive variants using the @{bp} suffix. See Responsive Suffix for syntax and breakpoints.

Related

• Border width