Bootstrap Borders, Rounded Corners and Shadows (5.3)

Bootstrap 5 has utility classes for every part of a border: whether an element has one, on which sides, its color, width, and opacity, and how round its corners are. Shadows get three sizes and an off switch. This guide is a reference for all of them, with the exact values behind each class, examples to copy, and how to change the defaults. Everything is for Bootstrap 5.3.

Add or remove a border

<div class="border">All four sides</div>
<div class="border-top">Top only</div>
<div class="border-end">Right side (end)</div>
<div class="border-bottom">Bottom only</div>
<div class="border-start">Left side (start)</div>

To remove borders, add -0: border-0 removes all of them, and border-top-0, border-end-0, border-bottom-0, and border-start-0 remove one side. This is how you take the border off a component that has one, such as a card (card border-0) or an input.

start and end mean left and right in left-to-right languages, and flip automatically in right-to-left layouts.

Border color

Add a color class next to border:

<div class="border border-primary">Primary border</div>
<div class="border border-danger">Danger border</div>
<div class="border border-success-subtle">Soft green border</div>

Every theme color works: border-primary, border-secondary, border-success, border-info, border-warning, border-danger, border-light, and border-dark, plus border-black and border-white. Bootstrap 5.3 adds softer versions for each theme color, such as border-primary-subtle, which pair with bg-primary-subtle backgrounds. The default border color is #dee2e6 in light mode.

The color class does nothing on its own: the element needs border (or a side class) too.

Border width

border-1 to border-5 set the width from 1px to 5px:

<div class="border border-3 border-primary">3px border</div>

The default border is 1px.

Border opacity

Make a border translucent with border-opacity-* (values 10, 25, 50, 75, and 100):

<div class="border border-primary border-opacity-50">Half-opacity border</div>

Rounded corners

Round only some corners with a side: rounded-top, rounded-end, rounded-bottom, and rounded-start, each with an optional size such as rounded-top-3.

<img src="avatar.jpg" class="rounded-circle" width="64" height="64" alt="Avatar">
<span class="badge text-bg-primary rounded-pill">New</span>
<div class="p-4 bg-body-tertiary rounded-4">Soft card</div>

rounded-circle makes a circle only when the element is square; on a rectangle it makes an oval.

Shadows

<div class="card shadow-sm">Subtle lift</div>
<div class="card border-0 shadow">Floating card</div>
<div class="p-4 rounded-4 shadow-lg">Modal-like panel</div>

A shadow often looks cleaner without a border, so pair shadow with border-0 on cards. shadow-none removes a shadow a component adds by default, such as on a dropdown.

Shadow on hover. Bootstrap has no hover shadow class. Add one with a few lines of CSS:

.hover-shadow { transition: box-shadow .2s ease; }
.hover-shadow:hover { box-shadow: var(--bs-box-shadow) !important; }

<div class="card hover-shadow">Lifts on hover</div>

Shadows and borders in dark mode

Borders follow the color mode automatically: in dark mode the default border color switches to a dark grey (#495057). Shadows keep the same black color, which is hard to see on a dark background. In dark mode, rely on borders or a lighter background (bg-body-tertiary) to separate surfaces, rather than shadows. The dark mode guide covers the color mode setup.

Change the defaults

In Sass, set these variables before importing Bootstrap:

$border-width: 1px;
$border-color: #e2e8f0;
$border-radius: .5rem;
$border-radius-sm: .25rem;
$border-radius-lg: .75rem;
$box-shadow: 0 .25rem .75rem rgba(15, 23, 42, .08);
$box-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
$box-shadow-lg: 0 1rem 2.5rem rgba(15, 23, 42, .12);

@import "bootstrap/scss/bootstrap";

$border-radius changes the corners of buttons, inputs, cards, and every other component, not only the rounded class. To remove rounding everywhere, set $enable-rounded: false. Component shadows (on buttons and inputs) are off by default; $enable-shadows: true turns them on. See Bootstrap Sass variables explained, or change these values visually in the builder and export the CSS.

Without Sass, override the CSS variables:

:root {
  --bs-border-color: #e2e8f0;
  --bs-border-radius: .5rem;
  --bs-box-shadow: 0 .25rem .75rem rgba(15, 23, 42, .08);
}

FAQ

How do I add a border in Bootstrap 5?

Add the border class for all four sides, or border-top, border-end, border-bottom, or border-start for one side. Add a color such as border-primary and a width from border-1 to border-5.

How do I remove a border in Bootstrap?

Add border-0 to remove all borders, or border-top-0, border-end-0, border-bottom-0, or border-start-0 to remove one side. For example, card border-0 gives a card with no outline.

How do I make rounded corners in Bootstrap?

Add rounded for the default radius, or rounded-1 to rounded-5 for smaller to larger corners. Use rounded-circle for a circle, rounded-pill for a pill shape, and rounded-0 for square corners.

How do I add a shadow in Bootstrap 5?

Add shadow-sm for a subtle shadow, shadow for a medium one, or shadow-lg for a large one. Use shadow-none to remove a shadow. Change the values with the $box-shadow Sass variables or the --bs-box-shadow CSS variables.

Why doesn’t border-primary show a border?

A border color class only sets the color. The element also needs a border, so add border (or a side such as border-bottom) next to it: class="border border-primary".