How to set visibility property of an element in CSS ?

Last Updated : 23 Jul, 2025

Visible property is used to specify whether an element is visible or not in a web document, but the hidden elements take up space in the web document. You can set the visibility property of an element in CSS using the same Visible property.

Through visibility property, we can make elements like images, text, boxes, etc visible to our naked eye, or you can even hide. To hide table elements you can use collapse, which you will encounter further in this article.

Syntax:

visibility: visible | hidden | collapse | initial | inherit;

Property value:

visible: It is the default value. The element is a show or visible normally in the web document.
hidden: This property hides the element from the page but takes up space in the document.
collapse: This property only used for the table elements to remove the rows and columns from the table.

Example 1: Using Visible and hidden property value.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .line1 {
            color: green;
            /* visible value to make element visible */
            visibility: visible;
        }
        
        .line2 {
            color: green;
            /* hidden value to hide elements from user. */
            visibility: hidden;
        }
    </style>

</head>

<body>
    <h1> 
        Given line is <small class="line1">
        Welcome to GeeksforGeeks</small> Visible
    </h1>
    <h1> 
        Given line is <small class="line2">
        Welcome to GeeksforGeeks</small> Hidden
    </h1>
</body>

</html>

Output:

Example 2: Using Collapse property value.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
            table.geeks {
            /* collapse value to delete row and 
               column from table */
            visibility: collapse
        }
        
        table,
        th,
        td {
            border: 1px solid red;
            p {
                color: green;
                font-size: 25px;
            }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksForGeeks</h1>
        <h2>visibility:collapse;</h2>
        

<p>geeksforgeeks</p>



        <!---table tag to form table --->
        <table style="border:1px solid red;" class="geeks">
            <tr>
                <th>geeks</th>
                <th>for</th>
                <th>geeks</th>
            </tr>
        </table>
        

<p>A computer science portal for geeks</p>



    </center>
</body>

</html>