# Border

We use borders to define elements and create visual separation, making content easier to scan and understand.

| Token                                                                                                                                             | Value                                                                     | Example |
| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------- |
| `borderInteractive` Default border of interactive elements.                                                                                       | var(--sizeBorderDefault) solid var(--colorBorderInteractive)              |         |
| `borderInteractiveQuiet` Borders of interactive elements that should attract less attention.                                                      | var(--sizeBorderDefault) solid var(--colorBorderInteractiveQuiet)         |         |
| `borderInteractiveLoud` Borders of interactive containers that should attract attention.                                                          | var(--sizeBorderDefault) solid var(--colorBorderInteractiveLoud)          |         |
| `borderInteractiveHover` Borders of interactive elements in a hover state.                                                                        | var(--sizeBorderDefault) solid var(--colorBorderInteractiveHover)         |         |
| `borderInteractiveDisabled` Borders of interactive elements in a disabled state.                                                                  | var(--sizeBorderDefault) solid var(--colorBorderInteractiveDisabled)      |         |
| `borderInteractiveSelected` Borders of interactive elements in a selected state.                                                                  | var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelected)      |         |
| `borderInteractiveSelectedHover` Borders of interactive elements in a selected and hover state.                                                   | var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelectedHover) |         |
| `borderStatic` Borders of non-interactive containers.                                                                                             | var(--sizeBorderDefault) solid var(--colorBorderStatic)                   |         |
| `borderStaticLoud` Borders or separators of non-interactive elements that should attract attention or are used on top of loud static backgrounds. | var(--sizeBorderDefault) solid var(--colorBorderStaticLoud)               |         |
| `borderNeutral` Borders of elements that signal something neutral.                                                                                | var(--sizeBorderDefault) solid var(--colorBorderNeutral)                  |         |
| `borderNegative` Borders of elements that signal something negative.                                                                              | var(--sizeBorderDefault) solid var(--colorBorderNegative)                 |         |
| `borderNegativeHover` Borders of interactive elements that signal something negative and are in a hover state.                                    | var(--sizeBorderDefault) solid var(--colorBorderNegativeHover)            |         |
| `borderPositive` Borders of elements that signal something has gone well.                                                                         | var(--sizeBorderDefault) solid var(--colorBorderPositive)                 |         |
| `borderWarning` Borders of elements that signal something requires urgent attention.                                                              | var(--sizeBorderDefault) solid var(--colorBorderWarning)                  |         |
| `borderInfo` Borders of elements that signal important information.                                                                               | var(--sizeBorderDefault) solid var(--colorBorderInfo)                     |         |
| `borderDiscover` Borders of elements that signal something new in the product.                                                                    | var(--sizeBorderDefault) solid var(--colorBorderDiscover)                 |         |
| `sizeBorderDefault`                                                                                                                               | 1px                                                                       |         |
| `sizeBorderThick`                                                                                                                                 | 2px                                                                       |         |
| `sizeBorderThickest`                                                                                                                              | 3px                                                                       |         |
| `sizeBorder4x`                                                                                                                                    | 4px                                                                       |         |