Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

## Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

### Additive

Add borders to custom elements:

1
2
3
4
5

HTML

```
<div class="border">1</div>
<div class="border-top">2</div>
<div class="border-end">3</div>
<div class="border-bottom">4</div>
<div class="border-start">5</div>

```

### Subtractive

Or remove borders:

1
2
3
4
5

HTML

```
<div class="border border-0">1</div>
<div class="border border-top-0">2</div>
<div class="border border-end-0">3</div>
<div class="border border-bottom-0">4</div>
<div class="border border-start-0">5</div>

```

## Color

Change the border color using utilities built on our theme colors.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

HTML

```
<div class="border-body border">1</div>
<div class="border-secondary border">2</div>
<div class="border-tertiary border">3</div>
<div class="border-primary border">4</div>
<div class="border-primary-subtle border">5</div>
<div class="border-link border">6</div>
<div class="border-info border">7</div>
<div class="border-info-subtle border">8</div>
<div class="border-success border">9</div>
<div class="border-success-subtle border">10</div>
<div class="border-warning border">11</div>
<div class="border-warning-subtle border">12</div>
<div class="border-danger border">13</div>
<div class="border-danger-subtle border">14</div>
<div class="border-black border">15</div>
<div class="border-white border">16</div>
<div class="border-emphasis border">17</div>
<div class="border-emphasis-inverted border">18</div>

```

## Opacity

To change that opacity, override `--bs-border-opacity` via custom styles or inline styles.

100%
50%

HTML

```
<div class="border border-success p-2 mb-2">100%</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">50%</div>

```

Or, choose from any of the `.border-opacity` utilities:

1
2
3
4

HTML

```
<div class="border border-primary border-opacity-25">1</div>
<div class="border border-primary border-opacity-50">2</div>
<div class="border border-primary border-opacity-75">3</div>
<div class="border border-primary border-opacity-100">4</div>

```

## Width

1
2
3
4
5

HTML

```
<div class="border border-1">1</div>
<div class="border border-2">2</div>
<div class="border border-3">3</div>
<div class="border border-4">4</div>
<div class="border border-5">5</div>

```

## Radius

Add classes to an element to easily round its corners.

1
2
3
4
5
6
7

HTML

```
<div class="border rounded">1</div>
<div class="border rounded-top">2</div>
<div class="border rounded-end">3</div>
<div class="border rounded-bottom">4</div>
<div class="border rounded-start">5</div>
<div class="border rounded-circle">6</div>
<div class="border rounded-pill">7</div>

```

### Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`.

1
2
3
4
5

HTML

```
<div class="border rounded-bottom-1">1</div>
<div class="border rounded-start-2">2</div>
<div class="border rounded-end-circle">3</div>
<div class="border rounded-start-pill">4</div>
<div class="border rounded-5 rounded-top-0">5</div>

```