Documentation v1.0.0

Borders

---
title: Borders
description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
toc: true
---

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

### Subtractive

Or remove borders:

## Color

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

Or modify the default `border-color` of a component:

<Example html={`<div class="mb-4">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">Dangerous heading</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>
`} />

## Opacity

Bootstrap `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

### How it works

Consider our default `.border-success` utility.

```css
.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}
```

We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.

### Example

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

<Example
  html={`<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>`}
/>

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

<Example
  html={`<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>`}
/>

## Width

## Radius

Add classes to an element to easily round its corners.

### Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API.

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:

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Subtractive

Or remove borders:

<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>

Color

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

<span class="border border-primary"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-success"></span>
<span class="border border-success-subtle"></span>
<span class="border border-danger"></span>
<span class="border border-danger-subtle"></span>
<span class="border border-warning"></span>
<span class="border border-warning-subtle"></span>
<span class="border border-info"></span>
<span class="border border-info-subtle"></span>
<span class="border border-light"></span>
<span class="border border-light-subtle"></span>
<span class="border border-dark"></span>
<span class="border border-dark-subtle"></span>
<span class="border border-black"></span>
<span class="border border-white"></span>

Or modify the default border-color of a component:

Email address

Dangerous heading

Changing border color and width

<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">Dangerous heading</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
Changing border color and width
</div>

Opacity

Bootstrap border-{color} utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works

Consider our default .border-success utility.

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

We use an RGB version of our --bs-success (with the value of 25, 135, 84) CSS variable and attached a second CSS variable, --bs-border-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). That means anytime you use .border-success now, your computed color value is rgba(25, 135, 84, 1). The local CSS variable inside each .border-* class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.

Example

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

This is default success border

This is 50% opacity success border

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

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

This is default success border

This is 75% opacity success border

This is 50% opacity success border

This is 25% opacity success border

This is 10% opacity success border

<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>

Width

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

Radius

Add classes to an element to easily round its corners.

<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded" title="Example rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-top" title="Example top rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-end" title="Example right rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-start" title="Example left rounded image" />

Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5 including circle and pill, and can be configured by modifying the utilities API.

<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-0" alt="Example non-rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-1" alt="Example small rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-2" alt="Example default rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-3" alt="Example large rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-4" alt="Example larger rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-5" alt="Example extra large rounded image" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-circle" alt="Completely round image" />
<img src="https://placehold.co/150x75?text=150x75" width="150" height="75" class="rounded-pill" alt="Rounded pill image" />

Image with small bottom border radius (rounded-bottom-1)

Image with medium left border radius (rounded-start-2)

Image with circular right border radius (rounded-end-circle)

Image with pill-shaped left border radius (rounded-start-pill)

Image with large border radius but square top corners (rounded-5 rounded-top-0)

<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-bottom-1" alt="Image with small bottom border radius (rounded-bottom-1)" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-start-2" alt="Image with medium left border radius (rounded-start-2)" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-end-circle" alt="Image with circular right border radius (rounded-end-circle)" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-start-pill" alt="Image with pill-shaped left border radius (rounded-start-pill)" />
<img src="https://placehold.co/75x75?text=75x75" width="75" height="75" class="rounded-5 rounded-top-0" alt="Image with large border radius but square top corners (rounded-5 rounded-top-0)" />

On this page