Bootstrap 5 Border color

Last Updated : 05 Apr, 2024

Bootstrap 5 Border utility is used to set the style of the border element. The border styles can be of border-color, border-width, border-radius, etc.

Border color is used to set the color of the border element using utilities built on our theme colors.

Border color used Classes:

Class Name	Description
border-primary	Sets the primary color for the border.
border-secondary	Sets the secondary color for the border.
border-success	Sets the success color for the border.
border-danger	Sets the danger color for the border.
border-warning	Sets the warning color for the border.
border-info	Sets the info color for the border.
border-light	Sets the light color for the border.
border-dark	Sets the dark color for the border.
border-white	Sets the white color for the border.

Syntax:

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

Example 1: In this example, we will add different color borders on the span elements.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Border color</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
      </script>

    <style>
        /* CSS style for Boxes */
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 6px;
            background-color: #DCDCDC;
        }
    </style>
</head>

<body>
    <div class="container" style="text-align: center;">
        <h3>Bootstrap 5 Border color</h3>
        <div class="box">
            <span class="border border-primary"></span>
            <span class="border border-secondary"></span>
            <span class="border border-success"></span>
            <span class="border border-danger"></span>
            <span class="border border-warning"></span>
            <span class="border border-info"></span>
            <span class="border border-light"></span>
            <span class="border border-dark"></span>
        </div>
    </div>
</body>

</html>

Output:

Bootstrap 5 Border color Example Output

Example 2: In this example, we will add different color borders with different border widths of the span elements.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 5 Border color</title>
        <link
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <script
            src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>

        <style>
            /* CSS style for Boxes */
            span {
                display: inline-block;
                width: 100px;
                height: 100px;
                margin: 6px;
                background-color: #df7c7c;
            }
        </style>
    </head>

    <body>
        <div
            class="container"
            style="text-align: center"
        >
            <h3>Bootstrap 5 Border color</h3>
            <div class="box">
                <span
                    class="border border-3 border-primary"
                ></span>
                <span
                    class="border border-3 border-secondary"
                ></span>
                <span
                    class="border border-5 border-success"
                ></span>
                <span
                    class="border border-5 border-danger"
                ></span>
                <span
                    class="border border-2 border-warning"
                ></span>
                <span
                    class="border border-2 border-info"
                ></span>
                <span
                    class="border border-4 border-light"
                ></span>
                <span
                    class="border border-4 border-dark"
                ></span>
            </div>
        </div>
    </body>
</html>