Bootstrap

Border Classes in Bootstrap 5 | Explained

Borders are used to highlight and to specify the element or image which helps the user to understand things better. Borders are used by images, textareas, different boxes to style them according to the user requirement.

In this article you get detailed knowledge about bootstrap 5 classes for

  • Adding border
  • Removing border
  • Border Colors
  • Border Width
  • Border Sizes
  • Radius Sizes

Border Classes in bootstrap 5

In bootstrap 5 borders are created by adding .border class to any div or image tag or any form or textarea.

Classes to apply Border

Bootstrap 5 provides a couple of classes to specify border to any HTML element which are explained below:

Border

.border class is used to apply borders on all four sides of the box.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            </div>
        </div>
    </div>

This is how you create borders for all four sides.

Border Top

.border-top class is used to apply the border on the top side of the box.

Code

<div class="container mb-5">
  <h3 class="py-3 text-center">Border Classes</h3>
  <div class="col-md-4 mx-auto">
    <div class="border-top p-5">
      Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
    </div>
  </div>
</div>

This is how you create a border for the top side.

Border bottom

.border-bottom class is used to apply the border on the bottom side of the box.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border-bottom p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            </div>
        </div>
    </div>

This is how you create a border for the bottom side.

Border Start

.border-start class is used to apply the border on the left side of the box.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border-start p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            </div>
        </div>
    </div>

This is how you create a border for the left side.

Border End

.border-end class is used to apply the border on the right side of the box.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border-end p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            </div>
        </div>
    </div>

This is how you create a border for the right side.

Classes to remove Border

To remove the border from any side just add -0 to any border adding class

From-Top

To remove the border from the top add .border-top-0 with .border class.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border border-top-0 p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            </div>
        </div>
    </div>

This is how you remove the border from the top.

From-Bottom

To remove the border from the bottom add .border-bottom-0 with .border class.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border border-bottom-0 p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            </div>
        </div>
    </div>

This is how you remove the border from the bottom.

From-Left

To remove the border from the left add .border-start-0 with .border class.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border border-start-0 p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            </div>
        </div>
    </div>

This is how you remove the border from the left side.

From-right

To remove the border from the right add .border-end-0 with .border class.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border border-end-0 p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            </div>
        </div>
    </div>

This is how you remove the border from the right side.

Border Color Classes

To add border colors just add .border-primary/info/success/danger/warning/dark with .border class.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
    <div class="row">
        <div class="col-md-2">
            <div class="border border-primary p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-danger p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-warning p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-success p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-info p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-dark p-5"></div>
        </div>
    </div>
</div>

This is how you give color to your borders.

Border width classes

To give thickness to your border use .border-1/2/3/4/5 class with .border class.

Code

<div class="container mb-5">
        <h3 class="py-3 text-center">Border Classes</h3>
    <div class="row">
        <div class="col-md-2">
            <div class="border border-1 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-2 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-3 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-4 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-5 p-5"></div>
        </div>
    </div>
 </div>

This is how you give thickness to your border.

Border-Radius

To specify the radius of the border, use .rounded, .rounded-top/end/bottom/start/circle/pill classes.

Code

<div class="container mb-5">
        <h3 class="py-3">Border Classes</h3>
    <div class="row">
        <div class="col-md-2">
            <div class="border border-primary rounded p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-primary rounded-top p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-primary rounded-end p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-primary rounded-bottom p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-primary rounded-start p-5"></div>
        </div>
    </div>
</div>

Output

To create rounded circle and rounded pill:

Code

<div class="container mb-5">
        <h3 class="py-3">Border Classes</h3>
    <div class="row">
        <div class="col-md-2">
            <div class="border border-primary rounded-circle p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-primary rounded-pill p-5"></div>
        </div>
    </div>
</div>

This is how you specify the border radius.

Radius Sizes

To specify the radius size of the border, just add .rounded-0/1/2/3 classes.

Code

<div class="container mb-5">
        <h3 class="py-2">Border Classes</h3>
    <div class="row">
        <div class="col-md-2">
            <div class="border border-primary rounded-0 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-primary rounded-1 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-primary rounded-2 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-primary rounded-3 p-5"></div>
        </div>
    </div>
 </div>

Output

This is how you specify the border-radius size.

Conclusion

To give a border to any div or element add a .border class. To add one sided border add .border-top/bottom/end/start class along with .border class and to remove border from one side just add -0. To specify border color add .border-primary/success/danger/info/warning/dark/light class.
To give thickness to the border add .border-1/2/3/4/5, to specify the border radius add .rounded, .rounded-top/bottom/end/start/circle/pill class. To specify the size of the border radius add .rounded-0/1/2/3 class.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.