[Помогите] Двойной рамкой в CSS с промежутком в середине?

Можно ли как-то создать двойной рамкой в CSS, с этими настройками 2?:

1) Одна линия немного толще, чем другие
2) Существует небольшой разрыв между линиями

Пример того, что мне нужно:

 

Самый простой способ это создать два <div> и задать им стили.
Одному толстую рамку с paddingom, а другому тонкую.

 

Да, я знаю, что это очевидный метод, но я не хочу, чтобы изменить HTML, потому что это оригинальные OpenCart HTML кода. Там должен быть способ сделать это через CSS только.

 

Тогда используйте вот такие штуки)
Вариант 1 я уже написал выше.

Вариант 2:
border:1px solid red;
outline:5px solid #ccc;

Вариант 3:
.block{
border: solid 6px #fff;
position: relative;
z-index: 1;
}
.block:before {
content: "";
display: block;
position: absolute;
top: -12px;
left: -12px;
border: solid 6px #888;
width: 312px;
padding-bottom: 12px;
min-height: 100%;
z-index: 10;
}

Вариант 4:
.block{
box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}

 

Вариант №5 , нарисовать такие линии в фотошопе и в css использовать как картинку. + в том что не нужно будет хаки под разные браузеры писать

 

Алекс, спасибо за вашу помощь. Однако есть одно дополнительное условие, что я забыл упомянуть. Я только хочу, чтобы показать двойную рамку на верхней стороне. Я не хочу, чтобы показать его слева, справа и снизу.

Может ли это измениться быть включены в любой один из ваших вариантов тоже?

 

Примерно так
.block{
border-top:1px solid red;
outline-top:5px solid #ccc;
border-left:1px solid red;
border-right:1px solid red;
border-bottom:1px solid red;
}

 

Это не двойной рамкой. Я вижу только одну границу: http://codepen.io/anon/pen/fbGKi

Кроме того, я ничего не хочу на левой, правой и нижней сторонах.