# 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`
Border Top
`.border-top`
Border End
`.border-end`
Border Bottom
`.border-bottom`
Border Start
`.border-start`

### Subtractive

Border 0
`.border-0`
Border Top 0
`.border-top-0`
Border End 0
`.border-end-0`
Border Bottom 0
`.border-bottom-0`
Border Start 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-primary`
Border Secondary
`.border-secondary`
Border Success
`.border-success`
Border Danger
`.border-danger`
Border Warning
`.border-warning`
Border Info
`.border-info`
Border Light
`.border-light`
Border White
`.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-1`
Border 2
`.border-2`
Border 3
`.border-3`
Border 4
`.border-4`
Border 5
`.border-5`

## Border Radius

Border radius utilities are used to modify the roundness of an element.

100x100
100x100
100x100
100x100
100x100
100x100
100x200

### 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.

100x100
100x100
100x100
100x100

## 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-dotted`
Border Dashed
`.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.

Pill Button
Circle Image
Custom Alert
A simple primary alert—check it out!
Custom Card
Card Header
This is a custom card using border utilities.

### Related Links

Bootstrap Borders Documentation

Bootstrap's border utilities documentation

Related Link arrow_upward