Borders

Guidance

We use borders to separate, define, divide, and highlight content and components visually. Borders are a part of some components' styling and should never be changed. In some cases, border colours convey meaning and maintain consistent patterns across the design system.

---

Separating headers and headings

Use a 2px black border to separate table headers and nav headings from their content. Examples include tables and navs.

Header	Header	Header	Header
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell

---

Dividing content

Use a 1px grey-300 border to divide content. Examples include accordions, content lists, cards and tabs.

Content lists

• Lorem ipsum dolor sit amet consectetur adipiscing

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.

• Lorem ipsum dolor sit amet consectetur adipiscing

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.

Cards

---

Defining inputs

Define inputs using a 2px black border. Examples include forms and search.

---

Highlight the current page or tab

Highlight items that are currently active or being viewed using a 2px red border. Examples include tabs and navs.

---

Border radius

Border radius is used to create rounded corners. The two main tokens are border-radius and border-radius-pill. No other values should be used for rounded corners.

Border-radius

Almost all components with rounded corners use border-radius and have a 0.25rem (4px) border radius applied.

Primary button

Border-radius-pill

The only components with fully rounded corners are badges and tags. These components use border-radius-pill.

Badge Tag