W3.CSS Border

Last Updated : 02 Mar, 2021

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:

CSS Font Border

aditya_taparia

Improve

Article Tags :

W3.CSS Border

Thick Border:

Similar Reads

Thank You!

What kind of Experience do you want to share?