Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
visibility

visibility

Specifies whether an element is visible or hidden.

Sample Code

div.test { visibility: visible;}
div.test1 { visibility: hidden;}
table tr td { visibility: collapse;}

Available Values

Value	Description
visible	Displays the element. This 'visible' is the initial value.
hidden	Hides the element. Even when hidden, the element's space is preserved.
collapse	Hides a row or column of a table element. When hidden, the space that the element would have occupied is collapsed. If this value is specified on a non-table element, it is treated as 'hidden'.

Browser Display Result

<p style="visibility: visible;">This is a p element. 'visibility: visible' is specified.</p>

<p style="visibility: hidden;">This is a p element.</p>

<table style="border: solid 1px red;">
<tr style="visibility: collapse;">
	<td style="border: solid 1px;">This is a td element.</td>
	<td style="visibility: collapse; border: solid 1px;">This is a td element.</td>
	<td style="border: solid 1px;">This is a td element.</td>
</tr>
<tr>
	<td style="border: solid 1px;">This is a td element.</td>
	<td style="visibility: collapse; border: solid 1px;">This is a td element.</td>
	<td style="border: solid 1px;">This is a td element.</td>
</tr>
<tr>
	<td style="border: solid 1px;">This is a td element.</td>
	<td style="border: solid 1px;">This is a td element.</td>
	<td style="border: solid 1px;">This is a td element.</td>
</tr>
</table>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

4+ ○

3 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN.

Details

Specifies whether an element is visible or hidden.

Note that even when an element is hidden, its space is still preserved. Table row and column sizes are also calculated as if the hidden element exists. If you want an element to be completely absent from the layout, use 'none' with the 'display' property.

Note that in WebKit-based browsers (Chrome, Safari, Opera, Android browser), there is a known bug where specifying 'collapse' does not collapse the element's space. It may be best to avoid using the 'collapse' value.

If you find any errors or copyright issues, please contact us.

Home