Border Utilities

Utilities to quickly style the border and border-radius of any element.

Adding Borders

Add borders to any element, and then use color classes to set the border color.

Class Properties
border border: 1px solid #000000;
border-top border-top: 1px solid #000000;
border-right border-right: 1px solid #000000;
border-bottom border-bottom: 1px solid #000000;
border-left border-left: 1px solid #000000;

Removing Borders

Use the .border-0 and .border-{side}-0 utilities to remove borders from an element.

Class Properties
border-0 border: 0
border-top-0 border-top: 0
border-right-0 border-right: 0
border-bottom-0 border-bottom: 0
border-left-0 border-left: 0

Border Colors

Brand specific colors are avalible in addtion to the colors availble on the color utilities page.

Class Properties
border-primary border-color: @brand-primary;
border-success border-color: @brand-success;
border-danger border-color: @brand-danger;
border-warning border-color: @brand-warning;
border-info border-color: @brand-info;
border-white border-color: #fff;
border-transparent border-color: transparent;

Rounded Corners

Use utilities like .rounded-sm, .rounded, or .rounded-lg to apply different border radius sizes to an element.

Class Properties
rounded-0 border-radius: 0px;
rounded-sm border-radius: 3px;
rounded border-radius: @border-radius-base;
rounded-lg border-radius: @border-radius-large;
rounded-circle border-radius: 50%;
rounded-pill border-radius: 999px;
rounded-top border-top-left-radius: @border-radius-base; border-top-right-radius: @border-radius-base;
rounded-right border-top-right-radius: @border-radius-base; border-bottom-right-radius: @border-radius-base;
rounded-bottom border-bottom-right-radius: @border-radius-base; border-bottom-left-radius: @border-radius-base;
rounded-left border-top-left-radius: @border-radius-base; border-bottom-left-radius: @border-radius-base;