Почему не пограничный стиль: double; рендеринга?

У меня есть h1, на котором я определил следующие стили:

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

Здесь JSfiddle: http://jsfiddle.net/KatieK/Hs3ZQ/

Я установил стиль border в double, но я вижу только одну выделенную границу. Почему это не двойной рендеринг?

Ответы

Ответ 1

double отображает две прямые линии, которые составляют величину пикселя, определяемую как ширина границы (источник).

Вам нужно использовать не менее 3 пикселей.

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

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

Ответ 2

1px слишком тонкий, чтобы сделать двойную границу, вам нужно будет сделать границу толще.

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

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

Ответ 3

Для двойной границы вам нужно установить ширину границы не менее 3px на увидеть эффект.

Ответ 4

Удаление 1px из CSS будет работать...

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

см. обновленную скрипту: http://jsfiddle.net/Hs3ZQ/5/