The visibility CSS property can show or hide an element without affecting the layout of a document (i.e., space is created for elements regardless of whether they are visible or not). The property can also hide rows or columns in a <table>.

/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;

Note: To both hide an element and remove it from the document layout, set the display property to none instead of using visibility.

Initial value visible
Applies to all elements
Inherited yes
Media visual
Computed value as specified
Animation type a visibility
Canonical order the unique non-ambiguous order defined by the formal grammar


The visibility property is specified as one of the keyword values listed below.


The element box is visible.
The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).
  • For <table> rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.
  • For XUL elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect.
  • For other elements, collapse is treated the same as hidden.

Formal syntax

visible | hidden | collapse


Visibility values are interpolable between visible and not-visible. One of the start or ending values must therefore be visible or no interpolation can happen. The value is interpolated as a discrete step, where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.


Basic example


<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>


.visible {
  visibility: visible;

.not-visible {
  visibility: hidden;

Table example


    <td class="collapse">1.2</td>
  <tr class="collapse">


.collapse {
  visibility: collapse;

table {
  border: 1px solid red;

td {
  border: 1px solid gray;


  • Support for visibility: collapse is missing or partially incorrect in some modern browsers. It may not be correctly treated like visibility: hidden on elements other than table rows and columns.
  • visibility: collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility: visible is specified explicitly on nested tables.


Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'visibility' in that specification.
Candidate Recommendation Defines the collapse value as it applies to flex items.
CSS Basic Box Model
The definition of 'visibility' in that specification.
Working Draft No changes.
CSS Transitions
The definition of 'visibility' in that specification.
Working Draft Defines visibility as animatable.
CSS Level 2 (Revision 1)
The definition of 'visibility' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes 1 41 2 4 1
collapse 623 4 Yes Yes5 Yes Yes6 Yes7 8
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support 1 1 Yes 4 6 6 1
collapse No Yes3 4 Yes Yes5 Yes Yes6 Yes7 8

1. Internet Explorer doesn't support visibility: initial.

2. Up to Internet Explorer 7, descendants of hidden elements will still be invisible even if they have visibility set to visible.

3. Chrome treats visibility: collapse like hidden, leaving a white gap.

4. Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

5. Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.

6. In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.

7. Safari treats visibility: collapse like hidden, leaving a white gap.

8. Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.