1. You cannot stretch the image, but you can repeat it, as in the style.
2. CSS rounded corners work with all browsers except the 'smart' IE. Anyway, you can add the border style to your CSS:
-moz-border-radius: 5px /* for FF */
-webkit-border-radius: 5px /* for Safari, Opera, Chrome and likes */
The value 5px is the size of the curve.

Whats the alternative then when dealing with IE, to achieve rounded borders?

Either jQuery (http://docs.jquery.com/Tutorials:Rounded_Corners) or using CSS with two background images (at least) to achieve it.

Thanks,

The issue with the browsers compatibility is a pain.
I thoght i could set an image with rounded corners and stretcch it.
If someone knows how to do it, please post here.

Thanks again

You can try something like:
background-size: 100%
This is CSS3 though.

If you give more details about what you're trying to do, I could give some more help.

I want a side bar with background and border with rounded corners, i realized that it cannot be done with the UI so ive made a jpeg image with blue color and round corners, now im trying to insert it and make it fit the block.
Alternatly i know i can design an image with the exact scale i want, but im trying to make something that will work faster and simpler.

I achieve a similar effect for a sidebar or a whole page width using 3 DIV tags and two images.
Have a look at:http://beta.koutbo6.com/
If you browse through the site, you'll see that middle area expands as you go.
I'm using 3 DIV as mentioned:
top-cap | content | bottom-cap
and two images:
http://media.koutbo6.com/images/middle-cap.png... for the top and bottom rounded corners
andhttp://media.koutbo6.com/images/middle-repeat.png... to make the middle area expandable as needed.
An excerpt from the CSS:
div#top-cap{background:url(../images/middle-cap.png) top center no-repeat;height:10px;margin: -5px 0 0 0;}
div#bottom-cap{background:#a8afb9 url(../images/middle-cap.png) bottom center no-repeat;height:10px}
div#content{background:url(../images/middle-repeat.png) top center repeat-y}

Hope this helps

Hi okhayat

First, thanks for helping.
Second, i tried it (with images) and for some reason it didnt work for me.
I checked the paths over and over again and i still dont know why it doesnt work.
I tried "background-size: 100%" and it was better but the image was not on all of the block.
The upper, left and right side of the block was good but it didnt get down all the way to the bottum of the block.
The image filled just 2/3 of the block, do you know why ?

Ok. The HTML code is:
<div id="content">
<div id="top-cap"></div>
<div id="bottom-cap"></div>
</div>
and the CSS is:
<style>
div#top-cap {margin:0; padding:0; height:10px; background: #fff url(middle-cap.png) top left no-repeat}
div#content {margin:0 auto; width:950px; background: url(middle-repeat.png) top left repeat-y}
div#bottom-cap {margin:0; height:10px;background: #fff url(middle-cap.png) bottom left no-repeat}
</style>
Notice the top-cap and bottom-cap are inside the container and both are set to 10px height, just enough to display the curve. Also, I've set the background color to while (#fff) to hide the middle repeated background.

Another way is to move the top-cap and bottom-cap outside, before and after the content DIV.
So, the HTML code would be:
<div id="top-cap"></div>
<div id="content"></div>
<div id="bottom-cap"></div>
and CSS would be:
div#top-cap {margin:0 auto; width:950px; padding:0; height:10px; background: #fff url(middle-cap.png) top left no-repeat}
div#content {margin:0 auto; width:950px; background: url(middle-repeat.png) top left repeat-y;overflow:hidden}
div#bottom-cap {margin:0 auto; width:950px; height:10px;background: #fff url(middle-cap.png) bottom left no-repeat}
There are ofcourse many ways, but this is what I've been using.