Border

Utilities for an element's border.

Class	Properties
.ba	border-style: solid; border-width: 1px;
.bt	border-top-style: solid; border-top-width: 1px;
.br	border-right-style: solid; border-right-width: 1px;
.bb	border-bottom-style: solid; border-bottom-width: 1px;
.bl	border-left-style: solid; border-left-width: 1px;
.ba0	border-style: none; border-width: 0;
.bt0	border-top: 0;
.br0	border-right: 0;
.bb0	border-bottom: 0;
.bl0	border-left: 0;

Usage

Use .b{direction} to add a border to an element. Use .b{direction}-0 to remove it.

.ba

.bt

.br

.bb

.bl

Responsive

To control the border of an element at a specific breakpoint, add @{breakpoint} at the end of the utility.

Change window size to see the magic

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.