Algo asi
Código CSS:
Ver original<!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" xml:lang="es" lang="es-es">
<head>
<title>Esquinas redondeadas sin imagenes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{margin: 0; padding: 0;}
.caja {
margin: 0 auto;
width: 300px;
position: relative;
}
.punto {
position: absolute;
width: 25px;
height: 25px;
}
.lt {
background-image: url(lt.png);
top: -1px;
left: -1px;
}
.rt {
background-image: url(rt.png);
top: -1px;
right: -1px;
}
.lb {
background-image: url(lb.png);
bottom: 0;
}
.rb {
background-image: url(rb.png);
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<br />
<div class="caja">
<div class="punto lt"></div>
<div class="punto rt"></div>
<div class="punto lb"></div>
<div class="punto rb"></div>
<img src="nubes.jpg" />
</div>
</body>
</html>
Las imagenes
http://www.megaupload.com/?d=3F30PT8Y