Bootstrap includes some excellent border utility classes. It has five utility classes for border width, also known as border thickness. We can also customize the built-in $border-width
variable and the --bs-border-width
variable.
In this tutorial we will demo these three methods of controlling element border width. Here’s what we will build:

How to Use Bootstrap Border Width Classes
Bootstrap border width classes only set the CSS border-width
property. They do not set any other styling values. That means a div with border-width
and some height and width will still not have a visible border.
Make sure to also set the border-style
property and the border-color
property. Here is example code that uses the border
Bootstrap border utility class to apply border style and color:
<div className="box border border-success border-1 text-center">border-1 class</div>
<div className="box border border-success border-2 text-center">border-2 class</div>
<div className="box border border-success border-3 text-center">border-3 class</div>
<div className="box border border-success border-4 text-center">border-4 class</div>
<div className="box border border-success border-5 text-center">border-5 class</div>
Additionally I have customized the border color with the border-success
utility class and created my own box
class to give the divs width and height.
I used border-4 to add thickness to the Card border in this tutorial.
Notice how there are five different border-*
classes. Each one by default corresponds to a greater border-width value: 1px, 2px, 3px, 4px, 5px.
Here’s how this looks in the DOM:

Notice how most of the styling is set through the border
class. What the border-5
class does is it sets the --bs-border-width
value to 5px. This value is then consumed by the border
class when it sets border width.
The Bootstrap border radius utility is also very useful.
How to Set Border Thickness with –bs-border-width Variable
Instead of using a border width utility like border-3
, we can directly update the --bs-border-width
variable. Here’s the code:
:root {
--bs-border-width: 10px;
}
Make sure that this code comes after the @import "bootstrap/scss/bootstrap";
snippet in your .scss
file.
What the code above is doing is overriding the --bs-border-width
value that comes from the Bootstrap root
styling file. We can see this in the DOM below.

This value will be consumed by the border
utility class as normal. We don’t need a border width class on our div:
<div className="box border border-success text-center">Custom --bs-border-width</div>
How to Set Border Thickness with $border-width Variable
A final way of setting custom border thickness in Bootstrap is to use a custom class and override the default $border-width
value. Here’s example code:
//JSX
<div className="box custom-border border-success text-center">Custom $border-width</div>
//.scss file
$border-width: 12px;
.custom-border {
border-width: $border-width;
border-style: solid;
}
We created a class called custom-border
and supplied it with the $border-width
variable for its border width property.
All three methods described are useful for controlling border thickness. My favorite is to override the --bs-border-width
root value so that multiple components can share this styling.