Border

The .border class is used to quickly add border to any element. There are two distinctive methods of adding borders, additive and subtractive.

The additive border assumes that each border needed is added individually. Thus, you can add all borders with .border or each border at a time with .border-start, .border-top, .border-end and .border-bottom classes.

        <div class="row">
            <div class="col">
                <div class="border"></div>
                <div class="border-start"></div>
                <div class="border-top"></div>
                <div class="border-end"></div>
                <div class="border-bottom"></div>
            </div>
        </div>
    
    

In the example below, you can see how you can compose an all-around border using the individual classes for each side; The final outcome will be the same.

        <div class="row">
            <div class="col">
                <div class="border"></div>
                <div class="border-start border-top border-end border-bottom"></div>
            </div>
        </div>

The subtractive border assumes that each border needed is already added and the borders that are not needed are removed individually. Thus, you can add all borders with .border and remove any border using the .border-start-0, .border-top-0, .border-end-0 and .border-bottom-0 classes.

        <div class="row">
            <div class="col">
                <div class="border"></div>
                <div class="border border-start-0"></div>
                <div class="border border-top-0"></div>
                <div class="border border-end-0"></div>
                <div class="border border-bottom-0"></div>
            </div>
        </div>