Hola:
A ver si te sirve este ejemplo:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Fixed Width Rounded Corner Box</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */
body {
font: 62.5%/1.6 "Gill Sans", Futura, "Lucida Grande", Geneva, sans-serif;
color: #666;
background: #fff;
}
h2 {
font-size: 2.2em;
font-weight: normal;
line-height: 1;
color: #94b767;
margin: 0;
}
.box {
font-size: 2em;
}
/* caja de esquinas redondas
================================== */
.box {
width: 424px;
background: url(images/tile2.gif) repeat-y;
}
.box h2 {
background: url(images/top2.gif) no-repeat left top;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
.box .last {
background: url(images/bottom2.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box p {
padding-left: 20px;
padding-right: 20px;
}
-->
</style>
</head>
<body>
<div class="box">
<h2>Lorem Ipsum</h2>
<p class="last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p>
</div>
</body>
</html>
Las imágenes son:
tile2.gif =====> Borde lateral.
top2.gif ====> La cabecera.
bottom2.gif => El pie.
Si juegas con este codigo y tus imágenes conseguirás lo que quieres.
Saludos.
