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;


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







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


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.