Borders #

Borders provide structure and separation between elements.
Using --afp-color-border, all components share a unified and recognizable focus state.

Style #

The border style defines the default line appearance for all components.

Custom Property	CSS Class	Default	Preview
`--afp-border-style`	`afp-border-style`	`solid`

Width #

These properties use rem units in order to scale proportionately with the root font size.

Custom Property	CSS Class	Default
`--afp-border-width-s`	`afp-border-s`	`0.0625rem` (1px)
`--afp-border-width-m`	`afp-border-m`	`0.125rem` (2px)
`--afp-border-width-l`	`afp-border-l`	`0.1875rem` (3px)

Radius #

Common radius tokens let you apply different levels of rounding, so you can go beyond the default theme style when needed.

Size-based border radius properties allow you to customize the overall roundness of aFP Design System. These properties use rem units in order to scale proportionately with the root font size.

Custom Property	CSS Class	Default
`--afp-border-radius-pill`	`afp-radius-pill`	`9999px`
`--afp-border-radius-circle`	`afp-radius-circle`	`50%`
`--afp-border-radius-square`	`afp-radius-square`	`0px`
`--afp-border-radius-s`	`afp-radius-s`	`0.1875rem` (3px)
`--afp-border-radius-m`	`afp-radius-m`	`0.375rem` (6px)
`--afp-border-radius-l`	`afp-radius-l`	`0.75rem` (12px)

CSS Classes #

Border tokens can also be applied using composable utility classes. Each concern (width, color, direction, radius) is controlled independently and can be freely combined.

The general idea is: afp-border-{width} + afp-border:{color} + afp-bd-{direction}

Directions #

Direction utilities define which sides receive the border. When a direction utility is present, all sides are reset first to ensure predictable results.

CSS Class	Applies border to
`afp-bd-all`	all sides
`afp-bd-x`	left & right
`afp-bd-y`	top & bottom
`afp-bd-top`	top only
`afp-bd-right`	right only
`afp-bd-bottom`	bottom only
`afp-bd-left`	left only

Example #

Content

<div
  class="
    afp-padding-bottom:space-m
    afp-bd-bottom
    afp-border-s
    afp-border:neutral-200
  "
>
  Content
</div>

<div
  class="
    afp-padding-bottom:space-m
    afp-bd-bottom
    afp-border-s
    afp-border:neutral-200
  "
>
  Content
</div>

<div
  class="
    afp-padding-bottom:space-m
    afp-bd-bottom
    afp-border-s
    afp-border:neutral-200
  "
>
  Content
</div>

<div
  class="
    afp-padding-bottom:space-m
    afp-bd-bottom
    afp-border-s
    afp-border:neutral-200
  "
>
  Content
</div>

This creates:

a small border on the bottom side only
a neutral border color

Notes #

Border width utilities define the size once and are reused by direction utilities
Direction utilities only control where the border appears
Color utilities affect borders via currentColor
All border utilities are designed to be safely composable