Borders & Dividers

Borders help define the space and structure of the interface.

Default Border `ui3`

background

ui1

ui2

Dark Border `ui4`

background

ui1

ui2

ui3

Light Border `ui2`

background

ui1

ui3

Border on Dark `text2`

inverse

Using Border Colors

I have the default border

I have the dark border

<Box border="solid 1px" borderColor="ui3" p="large" mb="small">
  I have the default border
</Box>
<Box borderColor="ui4" border="solid 1px" p="large">
  I have the dark border
</Box>

<Box border="solid 1px" borderColor="ui3" p="large" mb="small">
  I have the default border
</Box>
<Box borderColor="ui4" border="solid 1px" p="large">
  I have the dark border
</Box>

Borders & Dividers

Default Border ui3

Dark Border ui4

Light Border ui2

Border on Dark text2

Using Border Colors

Default Border `ui3`

Dark Border `ui4`

Light Border `ui2`

Border on Dark `text2`