Why doesn't border-style: double; render?

Question

I have an h1 on which I've defined the following styles:

h1
  { text-align: center;
    border: double black 1px;
    padding: 1em;
    margin: 1em;
}

Here's a JSfiddle: http://jsfiddle.net/KatieK/Hs3ZQ/

I set the border-style to double, but I'm only seeing a single border rendered. Why isn't a double border rendering?

Answer 1

double displays two straight lines that add up to the pixel amount defined as border-width (source).

You'll need to use at least 3px.

h1
  { text-align: center;
    border: double black 3px;
    padding: 1em;
    margin: 1em;
}

http://jsfiddle.net/Hs3ZQ/6/

Answer 2

1px is too thin to render a double border, you'll have to make the border thicker.

h1
  { text-align: center;
    border: double black 3px;
    padding: 1em;
    margin: 1em;
}

http://jsfiddle.net/Hs3ZQ/3/