Open In App

W3.CSS Border

Improve
Improve
Like Article
Like
Save
Share
Report

Borders are generally used to display an outline around a box or table cell or any other HTML element. In W3.CSS, there are different classes available to add or remove borders. The classes that are used to add borders are referred to as additive classes and those that are used to remove borders are referred to as subtractive classes.

Additive Border Classes:

Sr. No. Class Name Description

1.

w3-border

It is used to add a border around the targeted element.

2.

w3-border-top

It is used to add a top border to the targeted element.

3.

w3-border-bottom

It is used to add a bottom border to the targeted element.

4.

w3-border-right

It is used to add a right border to the targeted element.

5.

w3-border-left

It is used to add a left border to the targeted element.

Subtractive Border Classes:

Sr. No.

Class Name

Description

1.

w3-border-0

Removes all the border from the targeted element.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
            
    <style
        /* CSS for Square boxes */ 
        span { 
            display: inline-block; 
            width: 70px; 
            height: 70px; 
            margin: 6px; 
            background-color: #DCDCDC; 
        
    </style
</head>
  
<body>
    <!-- w3-container is used to add 
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
      
    <!-- Additive Border Classes in W3.CSS -->
    <div class="w3-container w3-center">
        <h2 class="w3-text-pink">Additive Border Classes</h2
            <span class="w3-border w3-border-black"></span
            <span class="w3-border-top w3-border-black"></span
            <span class="w3-border-left w3-border-black"></span
            <span class="w3-border-bottom w3-border-black"></span
            <span class="w3-border-right w3-border-black"></span>
    </div>
      
    <!-- Subtractive Border Class in W3.CSS -->
    <div class="w3-container w3-center">
        <h2 class="w3-text-pink">Subtractive Border Classes</h2
        <span class="w3-border w3-border-black"></span
        <span class="w3-border-0"></span>
    </div>
</body>
</html>


Output:

Color of Borders: Any color can be added to the border by using the following border-color classes that are available in W3.CSS. If you want any other customized color, then you can set it manually using the CSS attribute.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
    <style
        /* CSS for Square boxes */ 
        span { 
            display: inline-block; 
            width: 70px; 
            height: 70px; 
            margin: 6px; 
            background-color: #DCDCDC; 
        
    </style
</head>
  
<body>
    <!-- w3-container is used to add 
          16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
            content of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
      
    <!-- Border Color Classes in W3.CSS -->
    <div class="w3-container w3-center">
        <h2 class="w3-text-pink">Coloured Border</h2
        <span class="w3-border w3-border-amber"></span
        <span class="w3-border w3-border-aqua"></span>
        <span class="w3-border w3-border-blue"></span>
        <span class="w3-border w3-border-cyan"></span>
        <span class="w3-border w3-border-pink"></span>
    </div>
      
    <!-- Hoverable Border Colour Classes in W3.CSS -->
    <div class="w3-container w3-center">
        <h2 class="w3-text-pink">Hoverable Coloured Border</h2
        <span class="w3-border w3-hover-border-amber"></span
        <span class="w3-border w3-hover-border-aqua"></span>
        <span class="w3-border w3-hover-border-blue"></span>
        <span class="w3-border w3-hover-border-cyan"></span>
        <span class="w3-border w3-hover-border-pink"></span>
    </div>
</body>
</html>


Output:

Thick Border:

You can add a thick border to any side of the targeted element by using W3.CSS border classes.

Sr. No. Class Name Description
1. w3-bottombar It is used to add a thick border at the bottom of the targeted element.
2. w3-leftbar It is used to add a thick border at the left side of the targeted element.
3. w3-rightbar It is used to add a thick border at the right side of the targeted element.
4. w3-topbar It is used to add a thick border at the top of the targeted element.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
            
    <style
        /* CSS for Square boxes */ 
        span { 
            display: inline-block; 
            width: 70px; 
            height: 70px; 
            margin: 6px; 
            background-color: #DCDCDC; 
        
    </style
</head>
  
<body>
    <!-- w3-container is used to add 
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
         of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
      
    <!-- Thick Border Classes in W3.CSS -->
    <div class="w3-container w3-center">
        <h2 class="w3-text-pink">Thick Border Classes</h2
        <span class="w3-bottombar w3-border-amber"></span
        <span class="w3-leftbar w3-border-green"></span>
        <span class="w3-topbar w3-border-blue"></span>
        <span class="w3-rightbar w3-border-cyan"></span>
    </div>
</body>
  
</html>


Output:



Last Updated : 02 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads