Error
Utilities to quickly style the border and border-radius of any element.
Add borders to any element, and then use color classes to set the border color.
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;
Use the .border-0 and .border-{side}-0 utilities to remove borders from an element.
.border-0
.border-{side}-0
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
Brand specific colors are avalible in addtion to the colors availble on the color utilities page.
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;
Use utilities like .rounded-sm, .rounded, or .rounded-lg to apply different border radius sizes to an element.
.rounded-sm
.rounded
.rounded-lg
rounded-0
border-radius: 0px;
rounded-sm
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;