I have divs scattered across my pages with rounded edges and gradients that vary in intensity from the edges to the center. Originally, these divs had a fixed width and height with one large background image. I needed them to be flexible, so I divided 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).
My current code for each div looks like this:
<div class="roundedbox" 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>
...
I am looking for a simpler way to structure these divs without having to add excessive HTML every time. I want JS to automatically create the necessary inner divs (topleft, etc.). How can I achieve this?
Alternatively, are there other methods to achieve resizable divs with rounded edges and gradients?