Open In App

Bootstrap 5 Borders

Improve
Improve
Like Article
Like
Save
Share
Report

Borders: Numerous utility/helper classes in Bootstrap 5 allow you to easily customize items without writing any CSS code. 

To easily style an element’s border, use the border utilities which are excellent for pictures, buttons, or any other element. To create or delete borders from an element, use border utilities. Select all borders at once or all at once. Its keywords are  {border}-{position} position can be top, end, bottom, or start

Bootstrap 5 Borders:

  • Border: Borders can be classified into 2 different types that are additive and subtractive. Additive Border is used to add a border to the element by specifying its position. A subtractive Border is used to remove (subtract) the border to the element by specifying its position.
  • Border color: Border color utilize utilities created using our theme colors to change the border’s color.
  • Border-width: Border width is used to increase or decrease the width of the border as per requirements.
  • Border-radius: Border radius uses the rounded classes, giving an element rounded corners.
  • Sass: It supports the various extension of Languages such as variables, utility API, and mixins.

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=
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
            crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h1 class="text-center text-success">
        GeeksforGeeks
    </h1>
    <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

Bootstrap 5 Borders

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=
         rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
         crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h1 class="text-center text-success">
        GeeksforGeeks
    </h1>
    <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

Bootstrap 5 Borders

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



Last Updated : 01 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads