Well I prefer to cut up the box in three sections. Top-Middle-Bottom. Top will hold the whole image from the top-left curve to the top-right curve. The middle will either be a solid background-color (with border if needed), or slice 1 pixel height of the background of the main bg and then use background: url(path/image.png) repeat-y. And use the Bottom for the whole image from the bottom-left curve to the bottom-right curve. However, if you are using a box that will stretch horizontally instead of vertically. Then use a Left-Center-Right thinking, and replace repeat-y with repeat-x.
I use a div class="top", with style that tell it the exact width and height of the Top Image. The div class="middle", you want to have the width specified. And the div class="bottom". needs to be style with exact width and height as well. In case there are any wrong renderings, use no-repeat in the top and bottom stylesheet backgrounds, as well, so there are no repeats. The only other thing you may have to do, because the top and bottom are images, they are automatic paddings to the box. So you might want to add a padding to the left and right of the middle style as well. If you have no area that can repeat the background, then you will need to do a full image of the rounded box. Hope this helps. Craig Jackson Web Developer -----Original Message----- I like to use Inkscape(SVG) to mock up my output pages (beats the drawing on paper thing and Firefox & Safari users can display it in the browser for full effect). I've drawn some nice looking gradient boxes (with rounded corners). Now I have to add it to my program so I'm assuming I'll add it to the css. What is the best way to duplicate a gradient rounded box in css ? a) fill the entire div with a png image with no-repeat ? b) slice the image and go the 4 corners route with transparent pngs ? the entire image seems the easiest but I'm wondering about performance of downloading large images especially when there are several / page. any suggestions ? _______________________________________________ UPHPU mailing list [email protected] http://uphpu.org/mailman/listinfo/uphpu IRC: #uphpu on irc.freenode.net _______________________________________________ UPHPU mailing list [email protected] http://uphpu.org/mailman/listinfo/uphpu IRC: #uphpu on irc.freenode.net
