Double border in CSS with gap in the middle?

Question

Is it possible to somehow create a double border in CSS, with these 2 added customizations:

1. One line is slightly thicker than the other
2. There is a small gap between the two lines

This is the kind of border I need:

EDIT:

Guys, I cannot make any changes to my existing HTML code. I can only apply CSS for the existing HTML code. As far as you're concerned, consider I have a div named sampleDiv, and I want to apply the border on the top side of this div (see below).

Secondly, if you're using any technique other than border, please note that I only want to apply the this specialized border on the top side of my sampleDiv div.

Answer 1

pure CSS & Cross browser - the thickness and spacing can be customized

After your latest Edit: this is a Working Fiddle

without changing the markup, top border only.

your HTML:

<div class="sampleDiv">
    some content
</div>

new CSS

.sampleDiv
{
    border-top: 2px solid black;
    padding-top: 1px;
}
.sampleDiv:before
{
    content: '';
    border-top: 1px solid black;
    display: block;
    width: 100%;
}

If you are allowed to change the DOM:

one line anywhere in the markup: Working Fiddle

HTML:

<div class="SpecialLine"></div>

CSS:

.SpecialLine
{
    border-top: 2px solid black;
    height: 2px;
    border-bottom: 1px solid black;
}

full container border: Working Fiddle

HTML:

<div class="SpecialContainer">
    <div class="Content">
        here goes the content
    <div>
</div>

CSS

.SpecialContainer
{
    border: 2px solid black;
    padding: 1px;
}

.Content
{
    border: 1px solid black;
}

Answer 2

There are various ways you can have multiple borders. One way is to use box-shadow, you can specify multiple box shadows to create the effect you want.

Example

box-shadow: 0 0 0 5px black, 0 0 0 7px red;

Update

I have created a jsFiddle to show you how you can create your borders using box-shadow

Fiddle

Answer 3

There's not a specific property or something for this,but you can easily create one.Something like this:

html:
<div id="wrapper">
    <div id="middle">put whatever you want here</div>
</div>

css:
#wrapper{
border: 3px solid black;
padding: 1px;
}

#middle{
border: 1px solid black;
}

here's a js fiddle link: http://jsfiddle.net/roostaamir/GEqLJ/

UPDATE: so I saw your edit,and here's the first thing that came to my mind(if you have the width of your sampleDiv this will work):

#sampleDiv
{
border-top: 3px solid black;
width: 500px; //this is an example
position: relative;
}

#sampleDiv:before
{
content: "";
display: block;
position: absolute;
top: 1px;
width: 500px;
height: 1px;
background-color: black;
}