Expand All | Collapse All

CSS visibility Property

Topic: CSS3 Properties ReferencePrev|Next


The visibility CSS property specifies whether an element is visible on the screen or not. That is, whether the boxes generated by an element are rendered or not.

The following table summarizes the usages context and the version history of this property.

Default value: visible
Applies to: All elements
Inherited: Yes
Animatable: Yes. See animatable properties.
Version: CSS 2, 3


The syntax of the property is given with:

visibility visible | hidden | collapse | initial | inherit

The example below shows the visibility property in action.

p {
    visibility: hidden;
div {
    visibility: hidden;

Property Values

The following table describes the values of this property.

Value Description
visible The box and its contents are visible. This is default.
hidden The box and its content are invisible, but still affect the layout of the page.

Only for certain internal table objects: rows, row groups, columns and column groups. It removes the objects, but it does not affect the table layout in any other way. The space occupied by the table object will be filled by subsequent siblings.

If collapse is specified for other element, it causes the same behavior as hidden.

initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element visibility property.

Browser Compatibility

The visibility property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: CSS Visibility, CSS Display.

Related properties: display.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties