Is it possible to use SVG images as CSS background?

How can you use html/css/php to give each corner of a div tag a different background image?

• I have four images (rounded corners). I want each one to be placed in the corner of a single div as background images. Please help! If placing them all in one div isn't possible then what is the most efficient way of doing this? I tried randomly: #window { background-image: url(images/window_tl.gif) , url(images/window_tr.gif) , url(images/window_bl.gif) , url(images/window_br.gif) ; background-position: top left, top right, bottom left, bottom right; background-repeat: no-repeat; background-color: #9bbbe3; padding: 10px; height: 300px; width: 200px; } ... It didn't work. Will choose best answer quickly!

• Answer:

  I think when css3 becomes standard, rounded corners will be easier to implement. Until then, here is how I have created rounded corners: You'll need three different divs... A top, a middle, and a bottom. The top div contains the the very top of the rounded corner box as a background image, with out any content. The middle div contains the sides of the box, repeated down (repeat-y, I think... I can never remember which is which) and also contains what ever you are placing inside the box. The bottom div then contains the bottom of the rounded corner box as a background image, with no content.