Bootstrap 4 - Borders

Description

Border utility provides style, color and radius of an element's border.

Additive and Subtractive

The element's border can be added or removed by using additive and subtractive utilities of border as shown below −

Example

Live Demo 
<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 −

Output

Border Color

You can set the color for an element's border by using the theme colors as shown in the below example −

Example

Live Demo 
<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 −

Output

Border Radius

You can add the rounded corners to an element by using the classes (rounded-top, rounded-right etc) as shown in the below example −

Example

Live Demo 
<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 −

Output

bootstrap4_utilities.htm
Advertisements