Question

I’m trying to create a bordered, folder-styled div in css but cannot seem to get rid of the border which separates the two parts.

Here’s how far I’ve got so far: http://jsfiddle.net/Argoron/GUtDy/12/

I’m at a loss as to how to avoid the border that separates the header div from the content div.

Thanks in advance for your help !

Answer 1

The correct approach would be to place one 1px (or npx, where n is the border width) over the other, then place the tab over the tabbed area with z-index.

Code

I didn’t use your code, but instead constructed from mine.

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;
}