Borders
Borders help define structure, separate content, and provide subtle emphasis in the interface. The design system uses consistent border styles, widths, and colours to maintain clarity and visual balance.
Border Defaults and Scale
The table below outlines the default border settings, including width, style, and colour. These values are exposed as CSS variables to ensure consistent usage across components. Semi-transparent border options are also available for lighter separation where less visual weight is needed or the border appears on a background colour.
| Example | Property | Value | CSS Variable | Usage |
|---|---|---|---|---|
| Border Width | 1px |
--bs-border-width |
Default border thickness | |
| Border Style | solid |
--bs-border-style |
Default border style | |
| Border Color | #C2C4C6 |
--bs-border-color |
Default border color | |
| Border Color Translucent | rgba(0, 0, 0, 0.175) |
--bs-border-color-translucent |
Semi-transparent borders | |
| Border Color Dark | #8B8D90 |
--bs-border-color-dark |
Dark border color for enhanced contrast | |
| Border Color Accent | #2699D5 |
--bs-border-color-accent |
Accent borders and dividers |
Implementation
- Default Border Color - Components like card, accordion, or tabs, should use the default border colour. Consider this for any other common border applications.
- Border Color Translucent - Page break elements like
<hr>or any borders that render over a background colour can utilize the translucent option so that the border will become a shade of the colour behind it. - Border Color Dark - The dark border colour is utilized to increase contrast for elements that will benefit from it. This includes form input borders or the border separating the header from page content.
- Border Color Accent - Accent border colour should be used for components like accordion or tabs, to indicate which item is active/expanded.
Applying Borders with Bootstrap Utilities
You can apply borders directly in your markup using Bootstrap’s border utility classes:
<!-- Border on all sides -->
<div class="border">...</div>
<!-- Border on specific sides -->
<div class="border-top">...</div>
<div class="border-bottom">...</div>
<div class="border-start">...</div>
<div class="border-end">...</div>
<!-- Remove borders -->
<div class="border-0">...</div>
Using these utilities ensures borders align with the system’s predefined tokens while allowing flexibility in layout and component styling.