Border utilities

Adding borders #

You can add borders using .border / .border-{side}, where the {side} can be top, end, bottom, or start.

<!-- Adding borders -->
<div class="border">...</div>
<div class="border-top">...</div>
<div class="border-end">...</div>
<div class="border-bottom">...</div>
<div class="border-start">...</div>

Removing borders #

You can also remove borders using .border-0 / .border-{side}-0, where the {side} can be top, end, bottom, or start.

<!-- Removing borders -->
<div class="border border-0">...</div>
<div class="border border-top-0">...</div>
<div class="border border-end-0">...</div>
<div class="border border-bottom-0">...</div>
<div class="border border-start-0">...</div>

Color #

The border color can be changed using .border-{color}. Please note, these classes only affect the border-color property specifically, therefore, you may still need to add a border first (using .border or otherwise) for them to work properly. You can see the full list of these classes in the table below:

Opacity #

Consider the default CSS for the .border-primary utility:

.border-primary {
  --bs-border-opacity: 1;
  border-color: hsla(var(--bs-primary-hsl), var(--bs-border-opacity)) !important;
}

We use an HSL version of our --bs-primary CSS variable and attached a second CSS variable, --bs-border-opacity, for the alpha transparency (with a default value of 1 thanks to a local CSS variable). That means anytime you use .border-primary now, your computed color value is hsla(var(--bs-primary-hsl), 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.

Opacity Example #

You can modify the border opacity using the .border-opacity-{value} utilities, where the {value} can be a percentage of 75, 50, 25, or 10.

<!-- Modifying border opacities with utilities -->
<div class="border border-primary">...</div>
<div class="border border-primary border-opacity-75">...</div>
<div class="border border-primary border-opacity-50">...</div>
<div class="border border-primary border-opacity-25">...</div>
<div class="border border-primary border-opacity-10">...</div>

You can also override --bs-border-opacity via custom styles or inline styles.

<!-- Modifying border opacities with CSS variables -->
<div class="border border-primary">...</div>
<div class="border border-primary" style="--bs-border-opacity: 60%;">...</div>
<div class="border border-primary" style="--bs-border-opacity: 30%;">...</div>

Width #

The border-width can be set using .border-{size}, where the {size} can be 1, 2, 3, 4, or 5.

<!-- Setting border widths -->
<div class="border border-1">...</div>
<div class="border border-2">...</div>
<div class="border border-3">...</div>
<div class="border border-4">...</div>
<div class="border border-5">...</div>

Radius #

The border-radius can be set using .rounded / .rounded-{side}, where the {side} can be top, end, bottom, or start.

<!-- Setting border radii -->
<div class="rounded">...</div>
<div class="rounded-top">...</div>
<div class="rounded-end">...</div>
<div class="rounded-bottom">...</div>
<div class="rounded-start">...</div>

Radius Sizes #

You can also control the amount of roundedness using .rounded-{size} / .rounded-{side}-{size}, where the {size} can be 0, 1, 2, 3, 4, 5, circle, or pill. Please note, setting {size} to 0 will remove rounded corners all together.

<!-- Setting border radii and sizes -->
<div class="rounded-1">...</div>
<div class="rounded-2">...</div>
<div class="rounded-3">...</div>
<div class="rounded-4">...</div>
<div class="rounded-5">...</div>

<div class="rounded-0">...</div>
<div class="rounded-circle">...</div>
<div class="rounded-pill">...</div>

<!-- Setting border radii, sides, and sizes -->
<div class="rounded-bottom-1">...</div>
<div class="rounded-start-2">...</div>
<div class="rounded-end-circle">...</div>
<div class="rounded-start-pill">...</div>
<div class="rounded-5 rounded-top-0">...</div>