Container to overlap parent container

Question

I have two divs inside of eachother. The one #outside has a 5px border and the second #inside has content in it. I want #inside to overlap #outside at the top and bottom so that it effectively breaks the border and appears to be 2 brackets, if that makes sense.

HTML

 <div id='outside'>
      <div id='inside'>
           <h1>Sample header</h1>
           <p>Sample copy</p>
      </div> <!-- inside -->
 </div> <!-- outside -->

CSS

 #outside {
      border: 5px solid #000;
      padding: 5px;
 }

I dont quite know how to move the #inside div over the outside div, any advice will help!

Answer 1

Now you can used to position for this design

as like this

#outside {
      border: 5px solid #000;
      padding: 5px;
  position:relative;
 }

#inside{
background:red;
  position:absolute;
  top:-10px;
    left:10px;
  right:10px;
}

Demo1

DEMO2

Answer 2

Add negative margins to inside..

Concept:

#inside {
    width:   110%;
    height:  110%;
    margin-top: -10%;
    margin-left: -10%;
}

Or make outside position: relative; and make inside position: absolute; with a top: -10px; left: -10px;