Borders

Use border utilities to quickly and easily style the border and border radius of an element. These classes are perfect for styling images, buttons, or any other elements.

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

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

    <span class="border border-primary"></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"></span>
    <span class="border border-dark-subtle"></span>
    <span class="border border-black"></span>
    <span class="border border-white"></span>