CSS Property visibility

visibility specifies whether the element is rendered.


Initial value inherit
Inherited No.
Version CSS2
JavaScript syntax object.style.visibility="hidden"
Applies to All elements.

CSS Syntax

visibility: collapse | hidden | inherit | visible 

Property Values

The property values are listed in the following table.

visible Default. Show the element
hidden Hide the element but keep the space
collapse Only for table elements. collapse removes a row or column.
inherit Inherit the visibility property from its parent

Browser compatibility

visibility Yes Yes Yes Yes Yes


An example showing how to use visibility CSS property.

<!--   w  ww .  ja v  a  2  s  .  c  om-->
    position: relative;
    width: 800px;
    height: 800px;
    background: pink;
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;

* .small {
    position: absolute;
    padding-left: 10px;
    background: blue;  
  <div class="container"> 
    <div class="small">this is a test. 
       <BR/>this is a test. this is a test. 
       this is a test. </div> 
    <div class="box">this is a test</div> 

Click to view the demo