how to make child element cover border of parent?

Question

Here is a sort of rough picture of what I am trying to do. If it doesn't explain it well enough I can throw together a fiddle.

The black box is a <div> and the pink ones are also divs. What I want is for them to look sort of like tabs. So when one is active, it covers up the border of the parent giving the 'bridge' effect that is important in tabs.

I thought that I could just make the active one slightly more wide so it would cover up the border. The problem is if I have overflow-x: hidden; the wider part is 'beneath' the black outline and if I do auto or visible then it just lets it scroll.

One important thing: the pink need to have position relative.

What am I doing wrong?

EDIT: forgot to mention the most important part. The black box has overflow-y: hidden. Without it the methods below work fine, but when I add it, it goes back to how it was

Answer 1

Maybe this approach will help you:

.main {text-align: right;border: 10px solid #000;}
.main > div > div {width: 100px; height: 60px; display: inline-block;background-color: red;margin: 10px 0;}
.main > .selected > div {margin-right: -10px;padding-left: 10px;}

<div class="main">
    <div class="selected"><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

Answer 2

You just need to set a width on your container div, and not use overflow-x hidden;.

Here's an example: http://jsfiddle.net/YhAmh/1/