Border

The Border defines the visual boundaries and shapes of elements that communicate hierarchy, interactivity and states.

Border Radius

Rounded or sharp corners contribute to the overall look and feel of the interface. We use a consistent scale throughout the viewports (for Small and Large Themes) to create recognizable shapes across the system.

0px
0px
aero-borderRadius-none
Collection
Size
2px
2px
aero-borderRadius-default
Collection
Size
0px
0px
aero-borderRadius-subtler
Collection
Size
2px
2px
aero-borderRadius-subtle
Collection
Size
4px
4px
aero-borderRadius-strong
Collection
Size
4px
4px
aero-borderRadius-stronger
Collection
Size
8px
8px
aero-borderRadius-strongest
Collection
Size
999px
999px
aero-borderRadius-full
Collection
Size
0px
0px
aero-borderRadius-expressive
A special variable border-radius token that can be used for cases that express the brand more.
Collection
Size

 

Border Width

Standardized Border Width tokens are used to outline components like Inputs, Cards, and Buttons. Thicker borders may be used to emphasize active or selected states.

1px
aero-borderWidth-default
Collection
Size
0px
aero-borderWidth-none
Collection
Size
2px
aero-borderWidth-thick
Collection
Size
4px
aero-borderWidth-thicker
Collection
Size
8px
aero-borderWidth-thickest
Collection
Size

 

Looking for Border Colors? It’s at the Colors section.

 

© 2026 Air France.