# Borders and Dividers

You may find that a visual indicator is helpful to segment elements in an
interface. We have elements to help you do so in a consistent way across
platforms: borders and dividers.

## Borders

### Border Widths

To add a border to an element, use the border-width variables in the component's
styling to ensure consistent border thickness throughout Jobber.

Border style should be `solid` unless a specific use case calls for some other
format, such as indicating a dropzone on the
[`InputFile` component](../InputFile/InputFile.md).

| Width               | Visual | Value |
| :------------------ | :----- | :---- |
| `--border-base`     |        |       |
| `--border-thick`    |        |       |
| `--border-thicker`  |        |       |
| `--border-thickest` |        |       |

The `base` border width should be used for most use cases (see
[`Card`](../Card/Card.md) and [`List` items](../List/List.md) for in-context
examples). You may want to consider thicker borders when the border conveys a
closing of already-divided sections, such as a
[`Table` footer](../Table/Table.md).

### Border Colors

Borders should use `--color-border)` for most use cases.
[`List` sections](../List/List.md), [`Table` headers](../Table/Table.md) and
other scenarios where other bordered content is being further subsectioned
should use `--color-border--section)`.

For accessibility reasons, ensure that color usage is not the only way to
[convey meaning](https://webaim.org/articles/contrast/#sc141) in an interface.

## Dividers

The [`Divider` component](../Divider/Divider.md) will help you segment sections of
content without writing additional styling. This component will render a
horizontal rule that takes up the full available width.