CSS visibility Property
More "Try it Yourself" examples below.
Definition and Usage
The visibility property specifies whether or not an element is visible.
Tip: Hidden elements still take up space on the page. Use the CSS display property to both hide and remove an element from the document layout!
| Default value: | visible |
|---|---|
| Inherited: | yes |
| Animatable: | yes. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.visibility="hidden" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| visibility | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
CSS Syntax
visibility: visible|hidden|collapse|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| visible | Default value. The element is visible | Demo ❯ |
| hidden | The element is hidden (but still takes up space) | Demo ❯ |
| collapse | Only for table rows (<tr>), row groups (<tbody>), columns (<col>),
column groups (<colgroup>), and flex items. This value removes a row or
column as if display: none where used. If collapse is used on other elements, it renders as "hidden" |
|
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
This example demonstrates how to make a table row element collapse:
tr.collapse {
visibility: collapse;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Display and visibility
HTML DOM reference: visibility property
