Decoration Utilities

Borders

A few simple border styles.

borders all b-*
border-top bt-*
border-right br-*
border-bottom bb-*
border-left bl-*

Examples:

.b-0 0px – for removing borders

.b-dashed – 1px default

.b-thin – 1px default

.b-thick – 4px default

.b-heavy – 8px default

.bt-thick

.br-thick

.bb-thick

.bl-thick

Here’s the full set:

.b-0 / .bt-0 / .br-0 / .bb-0 / .bl-0
.b-dashed / .bt-dashed / .br-dashed / .bb-dashed / .bl-dashed
.b-thin / .bt-thin / .br-thin / .bb-thin / .bl-thin
.b-thick / .bt-thick / .br-thick / .bb-thick / .bl-thick
.b-heavy / .bt-heavy / .br-heavy / .bb-heavy / .bl-heavy

By default, borders are colored by the variable $color-fineline, same as table borders, tab labels, and horizontal rules. Borders can be assigned other Codebase colors using .b-color-{color} classes. See color utilities.

Note: the .b-color-{color} utilities will color the border on all sides (same color for all of top, right, bottom, and left).

Documentation