I am trying to figure out the best way to go about coding a design I am working on right now. The design has several boxes of varying widths and heights that each will have a unique border/corners. I came upon an article on ALA that talks about pretty much exactly what I want to do, unfortunately it seems to be quite outdated and doesn't work properly anymore: http://www.alistapart.com/articles/customcorners/

What is the best way to go about coding these boxes? The way I plan on doing it now it to have something like this:

Code:
<div id="box">
    <div id="boxTop"></div>
    Main box content
    <div id="boxBottom"></div>
</div>
#box would have a 1px high background-image repeated vertically that is the width of the box to create the borders on the sides and #boxTop and #boxBottom would have the top border/corners and bottom border/corners as background-images respectively. In theory this will work just fine, the only problem is I will have to make unique images for each box (because they are different widths). Is there a way to get around this and only have one box that can stretch both vertically and horizontally?