CSS Grunge Borders

Here's an example with perhaps a simpler way:

Another way to do this is with only two images and no tile. You'll have to create the top, but make it really long to accommodate any future lengthy text. Since this will be  larger image you'll have to use a jpg instead of a png and grab some of the body background.

You'll still have the wrapper, but put the empty div for the bottom outside the wrapper.

Option 2:

<div id="wrapper">
 <div id="content">
 </div>
</div>
 <div id="bottom"></div>                                      

Select all Open in new window

#wrapper {
 background: url('top.jpg') top center no-repeat;
}
#bottom {
height: /*this should be as high as the bottom.png or less*/
background: url('bottom.png') bottom center no-repeat;
}

Select all Open in new window

You can see a working example of this here on the blue sidebar. Also note a I've got a painterly border for the content area, this is using the tile solution I first suggested:
http://thehouseofsixdoors.com/about/

If you view source in firebug you'll see that there's a sidebar wrapper with a long image and a <p> (I used this instead of a div) for the bottom. There's a bit more going on because I had to work the horizontal shadows in above and below the social media. So here's some code to use:

<div id="sidebar-wrapper">
 <div id="content">
  ....
 </div>
</div>
 <div id="bottom"></div> 

Select all Open in new window

CSS

#sidebar-wrapper {
    background: url("images/sidebar-bg3.jpg") no-repeat top center;
    width: 301px;
}
#bottom {
    background: url("images/tweet-bg.png") no-repeat  bottom center;
    height: 13px;
    width: 301px;
}

Select all Open in new window

 

Play around with that code and add the following images. Sorry the images aren't semantic and that one's a png and one's a jpg, but you get the idea: