CSS visibility Property

The visibility property is used to specify the element that should be visible or hidden to the user.

It has the following values: visible, hidden and collapses.

When the element is set to "hidden", the content of that tag becomes fully transparent, but it will display the place of it. But the descendant elements of the hidden element can be visible if visibility:visible is applied to them.

If the value of the visibility property is set to "collapse", it can be used in Flexbox.

Some browsers do not use "collapse" value.

Initial Value	visible
Applies to	All elements.
Inherited	Yes.
Animatable	Yes.
Version	CSS2
DOM Syntax	Object.style.visibility = "collapse";

Syntax

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

Example of the visibility property with the "hidden" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Visibility property example.</h2>
    <div>Here is some text for example.</div>
    <p>Text, which will not be displayed in browser.</p>
    <div>
      You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
    </div>
  </body>
</html>

Try it Yourself »

Result

Example of the visibility property with the "visible" and "hidden" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .test1 {
        visibility: visible;
      }
      .test2 {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Visibility property example</h2>
    <p class="test1">Lorem Ipsum is simply dummy text.</p>
    <p class="test2">Lorem Ipsum is simply dummy text.</p>
    <p>The space above is a hidden text.</p>
  </body>
</html>

Try it Yourself »

Example of the visibility property with the "collapse" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .collapse {
        visibility: collapse;
      }
      table {
        border: 2px solid #666;
      }
      td {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Visibility property example</h2>
    <p>Here the "collapse" value is applied.</p>
    <table>
      <tr>
        <td>10</td>
        <td class="collapse">100</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>20</td>
        <td>200</td>
        <td>2000</td>
      </tr>
      <tr class="collapse">
        <td>30</td>
        <td>300</td>
        <td>3000</td>
      </tr>
      <tr>
        <td>40</td>
        <td>400</td>
        <td>4000</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
visible	In this case the tag is visible. This is the default value of this property.	Play it »
hidden	This value only visually hides the elements.	Play it »
collapse	Used with particular table elements (rows, row groups, columns, column groups) to remove entire rows or columns. This value has the same meaning as "hidden" when used with other elements.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.