A few months ago I came across a website with a banner using CSS border effects. I thought the trick was neat and it has stuck out in my mind since. Basically they filled up the div with border with to make the header/banner inverted on the sides.

like so... 

```
_______
\     /
/     \
-------

```

I was able to get the border to work! However, when I add content, the middle stretches. like so... 

```
______
\    /
 |  |
/    \
------

```

How can I make the text float over the borders?

here is my current css:

```
#header {
   height: 120px;
   width: 960px;
   border-style: solid;
   border-width: 60px;
   border-bottom-color: #fff;
   border-top-color: #fff;
   border-left-color: #000;
   border-right-color: #000;    
}

```