Get a free trial // Grow your CSS skills // Land your dream job


Last updated on:

The visibility property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element *without changing the layout*.

p {
  visibility: hidden;
tr {
  visibility: collapse;

visibility has four valid values: visible, hidden, collapse, and inherit. We’ll go through each of them to learn more.


Just like it sounds, visible makes things visible. Nothing is hidden by default, so this value does nothing unless you have set hidden on this or a parent of this element.


The hidden value hides things. This is different than using display: none, because hidden only visually hides elements. The element is still there, and still takes up space on the page, but you can’t see it anymore (kind of like turning the opacity to 0). Interestingly, this property does not inherit by default. That means that, unlike the display or opacity properties, you can make an element hidden, and still have one of its children as visible, like this:

Check out this Pen!

Notice that, while hidden, the parent element doesn't trigger the :hover.


This one only effects table rows (<tr>), row groups (like <tbody>), columns (<col>), column groups (<colgroup>), or elements made to be that way via display). Unlike hidden, this value hides the table sub element, without leaving the space where it was. If used anywhere but on a table sub element, it acts like visibility: hidden.

There are so many quirks with this it's hard to know where to begin. Just as an appetizer:

  • Chrome/Safari will collapse a row, but the space it occupied will remain. And if the table cells inside had a border, that will collapse into a single border along the top edge.
  • Chrome/Safari will not collapse a column or column group.
  • Safari collapse a table cell (wrong) but Chrome will not (right).
  • In any browser, if a cell is in a column that is collapsed (whether or not it actually collapses) the text in that cell will not be displayed.
  • Opera (pre WebKit) will collapse the crap out of everything, except a table cell (which is correct).

There is more, but basically: don't use this ever.


The default value. This simply causes the element to inherit the value of its parent.


visibility: collapse; is used in Flexbox as well, and more well definied (and presumably implemented but I haven't tested yet).

Related Properties

Other Resources

Browser Support

The basics, not considering all the quirks with collapse:

Chrome Safari Firefox Opera IE Android iOS
Any Any Any 4+ 4+ Any Any

IE 7- doesn’t support collapse or inherit.


  1. vishnu
    Permalink to comment#

    how to make the image responsive in picture tag using media queries for all browser including IE7

    Permalink to comment#

    I think you have 2 things to clarify in the beginning of your nice article (maybe article is outdated):
    1- visibility has 6 possible values instead of only 4: visible, hidden, collapse, initial, inherit and unset
    2- visibility is inherited by default. If you set a parent element’s visibility to hidden, then the child will have visibility: hidden, unless you explicitly set the child’s visibility to “visible”


  3. Roy
    Permalink to comment#

    Thanks it is useful post.
    I also refer very helpful and useful blog.
    Please visit this blog.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed