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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-1.png" data-lazy- height="294" src="data:image/svg xml,” width=”502″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-2.png" data-lazy- height="295" src="data:image/svg xml,” width=”504″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-3.png" data-lazy- height="294" src="data:image/svg xml,” width=”504″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-4.png" data-lazy- height="308" src="data:image/svg xml,” width=”482″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-5.png" data-lazy- height="300" src="data:image/svg xml,” width=”437″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-6.png" data-lazy- height="298" src="data:image/svg xml,” width=”445″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-7.png" data-lazy- height="314" src="data:image/svg xml,” width=”519″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-8.png" data-lazy- height="297" src="data:image/svg xml,” width=”482″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-9.png" data-lazy- height="297" src="data:image/svg xml,” width=”498″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-10.png" data-lazy- height="243" src="data:image/svg xml,” width=”745″>

Code

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-11.png" data-lazy- height="207" src="data:image/svg xml,” width=”634″>

Code

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

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-12.png" data-lazy- height="179" src="data:image/svg xml,” width=”626″>

To create rounded circle and rounded pill:

Code

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-13.png" data-lazy- height="240" src="data:image/svg xml,” width=”534″>

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

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Border-Classes-in-Bootstrap-5-Explained-14.png" data-lazy- height="210" src="data:image/svg xml,” width=”627″>

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.