Bootstrap 5 Borders Additive

Bootstrap5 Borders Additive classes are mainly used to display an outline around a box and it provides style, color, and radius of an element border on the side we want. For eg: if we want the border only on the top of the box we can have it by using the border-top additive class.

Bootstrap 5 Borders Additive classes:

• border: This class is used to add a border on all the edges around the element.
• border-top: This class is used to add a border from the top edge of the element.
• border-end: This class is used to add a border from the right edge of the element.
• border-bottom: This class is used to add the border from the bottom of the element.
• border-start: This class is used to add the border from the left of the element.

Syntax:

<div class="border-*">
 ...
</div>

Example 1: In this example, we added the border of the card on the top and bottom sides using the border additive classes.

Output:

👁 Image

Example 2: In this example, we added the border of the card on the left and right sides using the border additive classes.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/utilities/borders/#additive