Bootstrap 5 Borders

Last Updated : 04 Apr, 2024

Bootstrap 5 Borders offer predefined border styles to elements. Classes like .border, .border-0, .border-top, .border-bottom, .border-left, and .border-right provide easy customization for borders, including color, width, and radius, enhancing UI design.

Bootstrap 5 Borders:

Property	Description
Border	Classifies into additive and subtractive. Additive adds borders, subtractive removes.
Border Color	Utilizes theme colors to change border color.
Border Width	Increases or decreases border width.
Border Radius	Utilizes rounded classes for rounded corners.
Sass	Supports language extensions like variables, utility API, and mixins.

Examples of Bootstrap 5 Borders

Example 1: This code demonstrates the different border sizes as shown below. The class “border border-4″ means “border-4” size is applied to all the sides and so on.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Bootstrap 5 Borders </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>
</head>

<body>
    <h2 class="text-center">Bootstrap 5 Borders</h2>
    <div class="text-center">
        <span class="border border-4">1</span>
        <span class="border-top border-5">2</span>
        <span class="border-end border-4">3</span>
        <span class="border-bottom border-5">4</span>
        <span class="border-start border-3">5</span>  
    </div>
</body>
</html>

Output:

Bootstrap 5 Borders Example Output

Example 2: This code demonstrates different border colors using the relevant classes.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Bootstrap 5 Borders </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>
</head>

<body>
    <h2 class="text-center">
        Bootstrap 5 Borders
    </h2>
    <div class="text-center">
        <span class="border border-primary">
            1
        </span>
        <span class="border border-secondary">
            2
        </span>
        <span class="border border-success">
            3
        </span>
        <span class="border border-danger">
            4
        </span>
        <span class="border border-warning">
            5
        </span>
        <span class="border border-info">
            6
        </span>
        <span class="border border-light">
            7
        </span>
        <span class="border border-dark">
            8
        </span>
        <span class="border border-white">
            9
        </span>
    </div>
</body>
</html>

Output:

Bootstrap 5 Borders Example Output

Reference: https://getbootstrap.com/docs/5.0/utilities/borders/

Suggest improvement

Bootstrap 5 Background

Bootstrap 5 Colors

Share your thoughts in the comments

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Utilities

References