[UPHPU] best method for css rounded gradient boxes

[Velda Christensen]

miles wrote:
> 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 ? 

Ruzee borders use javascript, but the code ends up being lighter and 
alot easier to manage than what you can currently do with CSS, IMHO.  
Bear in mind I am a total CSS junkie and generally avoid javascript.  I 
would not use ruzee with drop shadows though as I've not had much luck 
there.

For CSS + images only, you can make a wide background (make it wider 
than you anticipate the box ever being - small file sizes are still 
achievable if your gradient is verticle) that has a rounded corner on 
the right side, background-position: right; background-repeat: 
no-repeat.  Use that as a background in a div.  Then add your left-side 
rounding using a positioned image inside the div.  You'll need to do the 
same thing for a "footer" on the box.

Hoping it helps,

Velda