The visibility property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the display property to 'none' to suppress box generation altogether).

  • Initial valuevisible
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableYes
  • CSS VersionCSS2, CSS3
  • JavaScript
Formal syntax: visible | hidden | collapse

visibility: visible;
visibility: hidden;
visibility: collapse;
  • visibleThe generated box is visible.
  • hiddenObject is hidden. The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible.
  • collapseThis value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. This value is used for row, row group, column, and column group elements. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'.
.class {
   position: absolute; 
   visibility: hidden;

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.