Borders & Dividers

Borders help define the space and structure of the interface.

background

ui1

ui2

background

ui1

ui2

ui3

background

ui1

ui3

inverse

I have the default border

I have the dark border

<Box2 border="ui3" p="u5" mb="u3">
  I have the default border
</Box2>
<Box2 border="ui4" p="u5">
  I have the dark border
</Box2>

<Box2 border="ui3" p="u5" mb="u3">
  I have the default border
</Box2>
<Box2 border="ui4" p="u5">
  I have the dark border
</Box2>