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.
