Попытка сформировать границу, вкладка папки в стиле div с помощью CSS

Question

Я пытаюсь создать граничный, стиль папок в CSS, но не могу избавиться от границы, которая разделяет две части.

Вот как далеко я дошел: http://jsfiddle.net/Argoron/GUtDy/12/

Я в растерянности относительно того, как избежать границы, которая отделяет заголовок div от содержимого div.

Заранее спасибо за помощь!

Answer 1

Правильный подход состоит в том, чтобы поместить один 1px (или npx, где n - ширина границы) поверх другого, затем поместить вкладку в область вкладок с z-index.

Код

Я не использовал ваш код, но вместо этого построен из моего.

HTML

<div id="wrapper">

    <h1>HEADER</h1>

    <div id="content-container">
        Content
    </div>

</div>

CSS

/* Tabbed view without separation border */
* {
    padding: 0;
    margin:  0;
}

#wrapper {
    width:   600px;
    padding: 10px;
    margin:  10px;
}

body {
    font-family: arial, serif;
}

h1, #content-container {
    border: 1px solid rgb(0, 0, 0);

}

h1 {
    /* This is the important part! */
    border-radius:       6px 6px 0 0;
    display:             inline-block;
    position:            relative;
    top:                 1px; /* Offset one pixel to the bottom */
    border-bottom-color: white; /* white border overrides black. white should be the same as the background color */
}

#content-container {
    border-radius: 0 6px 6px 6px;
}