What is the purpose of the "hidden" border style? Is there a way to reveal it? Why not just use "none"?

Answer 1

In terms of why you'd use a hidden border, it's because if you had one table cell that has a border and another adjacent cell that you don't want to have a border, then if you put border-style: none on the second cell, then the visible border will trump that instruction on the shared edge. But if you put border-style: hidden, that instruction will trump the visible border style.

Answer 2

Think of the difference between the two in terms of having a yard with no fence, and a yard with an invisible forcefield fence around it. In both cases, you wouldn't see a fence. In the first case (no fence), you could walk out of the yard and not run into anything. In the second case ("hidden" fence), you wouldn't see the fence but you would still run into it, and you could see its effects on other people or animals.

Translating that to CSS, it means that other elements on the page would still be affected by the hidden border in terms of page layout and spacing.

If you have a hidden border, the width of your element is border-width*2 plus content width. With border style set to none, your element width is just equal to the content width (plus padding / margins if they exist).