JS: Loop through divs of certain class and modify child Divs based on parent divs attributes?

Okay, so I have these divs all over my pages that have round edges and both vertical and horizontal gradients (they're lighter along the edges and become darker in the middle). My designer originally had these divs be a fixed width and height, with just one big background image, but I need the width and heights to be flexible, so I cut the background image into 9 smaller images, one for each corner (50x50px), two for the top and bottom edges (50px tall, 1px wide), two for the left and right edges (1px tall, 50px wide), and one for the center (1x1px).

Right now my code for each div looks like this:

<div class="roun开发者_如何学JAVAdedbox" id="rb1" 
style="width: 859px; padding-top:10px; margin-left:34px;"> 
<div class="topleft"></div>
<div class="topmid" style="width:759px;"></div>
<div class="topright"></div>
<div class="midleft" style="height: 61px;"></div>
<div class="midmid" style="height: 61px; width:759px"></div>
<div class="midright" style="height: 61px;"></div>
<div class="botleft"></div>
<div class="botmid" style="width:759px;"></div>
<div class="botright">
<h2 style="margin-top:-104px; margin-left:-789px">Div's Title Goes Here</h2>
</div>
</div>

What I want is this

<div class="roundedbox" id="rb1" 
style="width: 859px; height:161px; padding-top:10px; margin-left:34px;"> 
<h2>Div's Title Goes Here</h2>
</div>

I want to have that simple div structuring, with not a ton of extra HTML to have to write every time I want to make a div. Then, I want JS to automatically insert all the needed inner divs (topleft, etc.).

How do I go about doing this?

OR, what is another way to accomplish the same effect (divs with rounded edges and gradients, and are totally resizable)?

---

This will also help - more so in my opinion: http://css3pie.com/