In CSS 3 there will be a standard for that. Today you can do it (only for Mozilla and Webkit based browsers) with:
.roundBorder {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
Otherwise you can use multiple divs with backgound-images, but JQuery will provide a more simple way (that I don't know about :()
The multiple div way could look something like this:
html:
<div class="topLeft">
<div class="topRight">
<div class="bottomLeft">
<div class="bottomRight">
<div class="content">
</div>
</div>
</div>
</div>
</div>
css:
.topLeft {
background-image: url('topLeft.png');
background-position: top left;
background-repeat: no-repeat;
}
.topRight {
background-image: url('topRight.png');
background-position: top right;
background-repeat: no-repeat;
}
.bottomLeft {
background-image: url('bottomLeft.png');
background-position: bottom left;
background-repeat: no-repeat;
}
.bottomRight {
background-image: url('bottomRight.png');
background-position: bottom right;
background-repeat: no-repeat;
}