El ejemplo que está a continuación se ve mejor en IE, proximamente adaptado para FF

1. Como parte inicial deberemos definir la siguiente instrucción:

<style type="text/css">

<!--

body {text-align:center}

<style type="text/css">

<!--

#b3 {width:396;height:1;background:#9dd8ee;}

#b2 {width:398;height:1;background:#d1eaf4; border-right:1px solid #9dd8ee;border-left:1px solid #9dd8ee;}

#b1 {width:400;background:#d1eaf4;border-right:1px solid #9dd8ee; border-left:1px solid #9dd8ee;padding:4;}

-->

</style>
Para lograr visualizar el código ingresado en las etiquetas de <style> </style> es necesario incluir las siguientes líneas en el lugar donde vamos a mostrar la caja:
 <div id="b3"><img src="/images/blank.gif" width="1" height="1"></div>

<div id="b2"><img src="/images/blank.gifblank.gif" width="1" height="1"></div>

<div id="b1">Este es el resultado de las cajitas con las puntas redondeadas en CSS.</div>

<div id="b2"><img src="/images/blank.gif" width="1" height="1"></div>

<div id="b3"><img src="/images/blank.gif" width="1" height="1"></div>
Para funcione de la mejor manera debemos crear una imagen con las medidas de 1x1 px y de color transparente y sera la imagen que encontramos arriba nombrada como blank.gif.
Y este sera nuestro resultado:



Este es el resultado de las cajitas con las puntas redondeadas en CSS.