on a donc initialement :

<div class="roundbox">
<-- main content goes here -->
</div>

et l'on va obtenir :

<div class="dialog">
<div class="hd">
<div class="c"></div>
</div>
<div class="bd">
<div class="c">
<div class="s">
<div class="roundbox">
<-- main content goes here -->
</div>
</div>
</div>
</div>
<div class="ft">
<div class="c"></div>
</div>
</div>

avec ce script (à oui j'oubliais il faut aussi avoir la librairie JQuery) :

$(document).ready(function(){ $("div.roundbox") .wrap('<div class="dialog">'+
'<div class="bd">'+
'<div class="c">'+
'<div class="s">'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
$('div.dialog').prepend('<div class="hd">'+
'<div class="c"></div>'+
'</div>')
.append('<div class="ft">'+
'<div class="c"></div>'+
'</div>');
});

et ce css :

.dialog {
margin:0px auto;
min-width:20em;
}
.dialog .hd .c,
.dialog .ft .c {
font-size:1px; /* ensure minimum height */
height:13px;
}
.dialog .ft .c {
height:14px;
}
.dialog .hd {
background:transparent url(http://localhost/themes/aorakit-2D/img/tl.gif) no-repeat 0px 0px;
}
.dialog .hd .c {
background:transparent url(http://localhost/themes/aorakit-2D/img/tr.gif) no-repeat right 0px;
}
.dialog .bd {
background:transparent url(http://localhost/themes/aorakit-2D/img/ml.gif) repeat-y 0px 0px;
}
.dialog .bd .c {
background:transparent url(http://localhost/themes/aorakit-2D/img/mr.gif) repeat-y right 0px;
}
.dialog .bd .c .s {
margin:0px 8px 0px 4px;
background:#000 url(http://localhost/themes/aorakit-2D/img/ms.jpg) repeat-x 0px 0px;
padding:1em;
}
.dialog .ft {
background:transparent url(http://localhost/themes/aorakit-2D/img/bl.gif) no-repeat 0px 0px;
}
.dialog .ft .c {
background:transparent url(http://localhost/themes/aorakit-2D/img/br.gif) no-repeat right 0px;
}

et bien sur les bonnes images ...

upDate du 21/10/2009 : Pour de zolies images sous Gimp, un biseau de 16, une supernova 16,16,20,100,200 et des coins arrondis 10,4,4,8 ... bon il faut encore choisir la bonne couleur au départ ;-)