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
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
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
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
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
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
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
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
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
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
<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
<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
<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
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
<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.