Borders
Border utilities are used to add or remove an element’s borders. These utilities can be used one at a time or combined together.
Borders
Border utilities can either be additive, where borders are added to an element, or subtractive, where borders are removed from an element.
Additive
.border
.border-top
.border-end
.border-bottom
.border-start
Subtractive
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
Border Color
Theme colors can be used to change the color of an elements border. These utilities are named using the format
.border-{color}
where
color
is any theme color defined in the color map.
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-white
Border Width
Border width utilities change the thickness of the border. These utilities are named using the format
.border-{number}
where
number
is any thickness integer between 1 and 5.
.border-1
.border-2
.border-3
.border-4
.border-5
Border Radius
Border radius utilities are used to modify the roundness of an element.
Sizes
The border radius utilities above can be used in conjunction with additional border radius size utilities. These classes are named using the format
.rounded-{number}
where
number
is any integer between 0 and 3.
Border Style
Additional border style utilities have been created for Material Admin Pro to add more design flexibility to utilities. The examples below are shown using the
.border-3
width to make the effect more visible.
.border-dotted
.border-dashed
Usage Examples
Border utilities can be used together to acheive various effects, and can be used with existing components to modify the look and styling of the element.
Related Links
Bootstrap's border utilities documentation