# Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

## Additive

     <!-- borders -->
    <span class="border"></span>
    <span class="border-top"></span>
    <span class="border-end"></span>
    <span class="border-bottom"></span>
    <span class="border-start"></span>

## Subtractive

    <!-- borders-->
    <span class="border border-0"></span>
    <span class="border border-top-0"></span>
    <span class="border border-end-0></span>
    <span class="border border-bottom-0"></span>
    <span class="border border-start-0"></span>

## Color

    <span class="border border-primary border-box"></span>
    <span class="border border-primary-subtle"></span>
    <span class="border border-secondary"></span>
    <span class="border border-secondary-subtle"></span>
    <span class="border border-success"></span>
    <span class="border border-success-subtle"></span>
    <span class="border border-danger"></span>
    <span class="border border-danger-subtle"></span>
    <span class="border border-warning"></span>
    <span class="border border-warning-subtle"></span>
    <span class="border border-info"></span>
    <span class="border border-info-subtle"></span>
    <span class="border border-light"></span>
    <span class="border border-light-subtle"></span>
    <span class="border border-dark border-box"></span>
    <span class="border border-dark-subtle"></span>
    <span class="border border-black"></span>
    <span class="border border-white"></span>

## Example

This is default success border
This is 75% opacity success border
This is 50% opacity success border
This is 25% opacity success border
This is 10% opacity success border

    <!--opacity-->
    <div class="border border-success p-2 mb-2">This is default success border</div>
    <div class="border border-success p-2 mb-2 border-opacity-75">This is 75%
        opacity success border</div>
    <div class="border border-success p-2 mb-2 border-opacity-50">This is 50%
        opacity success border</div>
    <div class="border border-success p-2 mb-2 border-opacity-25">This is 25%
        opacity success border</div>
    <div class="border border-success p-2 border-opacity-10">This is 10% opacity
        success border</div>

## Width

    <!--width-->
    <span class="border border-1"></span>
    <span class="border border-2"></span>
    <span class="border border-3"></span>
    <span class="border border-4"></span>
    <span class="border border-5"></span>

## Radius

    <!--radius-->
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-top"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-end"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-bottom"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-start"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-pill"
        alt="img">

## Size

    <!--size-->
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-0"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-1"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-2"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-3"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-4"
        alt="img">
    <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-5"
        alt="img">