Bootstrap 5 Border-width

Last Updated : 16 Jan, 2023

Bootstrap 5 Border width is used to display an outline around a box and it provides style, color, and radius of an element border on the side. The border width sets the width of an element’s four borders. The width can be set as a specific size by using defined values.

Bootstrap5 Border width classes used:

border-*: This class is used to set the width of the border to 1-5 px. (Replace * with any size from 1 to 5)

Syntax:

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

Note: Here * can be replaced by a size from 1-5.

Example 1: In this example, we set the border width of the elements in four directions by using border-1,border-2,border-3 classes

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
 
<body>
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5> Bootstrap 5 Border-width</h5>
        <h6 class="my-2">Cards with Border width Classes</h6>
        <div class="row">
            <div class="col">
                <div class="card bg-light 
                            border border-danger border-1" 
                     style="width: 130px; height: 90px;">
                </div>
            </div>
            <div class="col">
                <div class="card bg-light 
                            border border-danger border-2" 
                     style="width: 130px; height: 90px;">
                </div>
            </div>
            <div class="col">
                <div class="card bg-light
                            border border-danger border-3"
                     style="width: 130px; height: 90px;">
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>

Output:

Example 2: In this example, we set the border width of the elements in four directions by using border-1, border-4, and border-5 classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
 
<body>
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5> Bootstrap 5 Border-width</h5>
        <h6 class="my-4">Cards with Border width Classes</h6>
        <div class="row">
            <div class="col">
                <div class="m-1 btn btn-light 
                            border border-danger border-1" 
                     style="width: 130px; height: 70px;">
                    <P>Button with border width</P>
                </div>
            </div>
            <div class="col">
                <div class="m-1 btn btn-light 
                            border border-danger border-4" 
                     style="width: 130px; height: 70px;">
                    <P>Button with border width</P>
                </div>
            </div>
            <div class="col">
                <div class="m-1 btn btn-light 
                            border border-danger border-5" 
                     style="width: 130px; height: 70px;">
                    <P>Button with border width</P>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>