Bootstrap 4 - Borders

Border utility provides style, color and radius of an element's border.
The element's border can be added or removed by using additive and subtractive utilities of border as shown below −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <br>
         <div class = "text-white bg-secondary">
            <h2>Additive</h2>
            <span class = "border">border</span>
            <span class = "border-top">border-top</span>
            <span class = "border-right">border-right</span>
            <span class = "border-bottom">border-bottom</span>
            <span class = "border-left">border-left</span>
            <br>
            <br>
         </div>
         
         <div class = "text-white bg-secondary">
            <h2>Subtractive</h2>
            <span class = "border border-0">border-0</span>
            <span class = "border border-top-0">border-top-0</span>
            <span class = "border border-right-0">border-right-0</span>
            <span class = "border border-bottom-0">border-bottom-0</span>
            <span class = "border border-left-0">border-left-0</span>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      
      </script>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
You can set the color for an element's border by using the theme colors as shown in the below example −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Border Color</h2>
         <div class = "bordercolor">
            <p>border-primary, border-secondary, border-success</p>
            <span class = "">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
               alt = "..." class = "border border-primary" >
            </span>
            <span class = "">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
               alt = "..." class = "border border-secondary" >
            </span>
            <span>
               <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
               alt = "..." class = "border border-success">
            </span>
            <br>
            <br>
            
            <p>border-danger, border-warning, border-info</p>
            <span>
               <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
               alt = "..." class = "border border-danger">
            </span>
            <span>
               <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
               alt = "..." class = "border border-warning">
            </span>
            <span>
               <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
               alt = "..." class = "border border-info">
            </span>
            <br>
            <br>
            
            <p>border-light, border-dark, border-white</p>
            <span>
               <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
               alt = "..." class = "border border-light">
            </span>
            <span>
               <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
               alt = "..." class = "border border-dark">
            </span>
            <span>
               <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
               alt = "..." class = "border border-white">
            </span>
            <br>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
border-primary, border-secondary, border-success
border-danger, border-warning, border-info
border-light, border-dark, border-white
You can add the rounded corners to an element by using the classes (rounded-top, rounded-right etc) as shown in the below example −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container-fluid bg-secondary">
         <br>
         <h2>Border Radius</h2>
         <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
            alt = "..." class = "rounded ">
         
         <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
            alt = "..." class = "rounded-top">
         
         <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
            alt = "..." class = "rounded-right">
         
         <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
            alt = "..." class = "rounded-bottom">
         
         <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
            alt = "..." class = "rounded-left">
         
         <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
            alt = "..." class = "rounded-circle">
         
         <img src = "https://www.tutorialspoint.com/bootstrap/images/download.png" 
            alt = "..." class = "rounded-0">
         <br>
         <br>
         <br>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page