Esquinas redondeadas en CSS sin imágenes ni javascript

Sin entrar en detalles sólo les voy a pegar el código con algunos comentarios, y les voy a dejar las demostraciones, ya que el código está muy claro.

Hay una forma muy «bruta» de hacerlo, que valida CSS y funciona en muchos navegadores:

	<style type="text/css">
	div#rounded-box1 {background:transparent;margin:2em auto;padding:0;width:400px;}
	.rb4 {background:#d40000;margin:0 auto;padding:0;width:398px;height:3px;}
	.rb3 {background:#d40000;margin:0 auto;padding:0;width:396px;height:2px;}
	.rb2 {background:#d40000;margin:0 auto;padding:0;width:392px;height:1px;}
	.rb1 {background:#d40000;margin:0 auto;padding:0;width:388px;height:1px;}
	.rb-content {background:#d40000;margin:0 auto;padding:0;width:400px;}
	.rb-content p {color:#fff;margin:0 14px;padding:0;}
	</style>
	<div id="rounded-box1">
	<div class="rb1"></div>
	<div class="rb2"></div>
	<div class="rb3"></div>
	<div class="rb4"></div>
	<div class="rb-content">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu
	arcu sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut,
	volutpat quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla
	lacus tellus, accumsan vitae, condimentum non, fermentum eu, ligula.</p>
	</div>
	<div class="rb4"></div>
	<div class="rb3"></div>
	<div class="rb2"></div>
	<div class="rb1"></div>
	</div>

Demo:

Otra forma es como sigue:

<style type="text/css">
div#rounded-box2 {background:#d40000;margin:0 auto;padding:0;width:400px;border-radius:7px;-moz-border-radius: 7px; -webkit-border-radius : 7px;}
div#rounded-box2 p {margin:0;padding:10px;color:#fff;}
</style>
<div id="rounded-box2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu arcu
 sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut, volutpat
quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla lacus tellus,
accumsan vitae, condimentum non, fermentum eu, ligula.</p>
</div>

Demo:

Finalmente les dejo un código css para crear esquinas redondeadas en varios navegadores:

/* Esquinas redondeadas */
border-radius:5px;

/*Descompuesta*/
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius = 10px; 
border-bottom-right-radius = 10px; 
	
/* Esquinas redondeadas en Firefox */
-moz-border-radius: 5px;  

/*Descompuesta*/
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft = 5px;  
-moz-border-radius-bottomright = 5px;  
        
	
/*Internet Explorer 8 */
-ms-border-radius: 5px;

/*Descompuesta*/
-ms-border-radius-topleft: 5px;  
-ms-border-radius-topright: 5px;
-ms-border-radius-bottomleft: 5px;  
-ms-border-radius-bottomright: 5px; 
	
/*Webkit y Safari */
-webkit-border-radius: 5px;

/*Descompuesta*/
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px;  
        
	
/* Konqueror */
-khtml-border-radius: 5px; 

/*Descompuesta*/
-khtml-border-radius-topleft: 5px;  
-khtml-border-radius-topright: 5px;  
-khtml-border-radius-bottomleft:5px;  
-khtml-border-radius-bottomright:5px;  

Fuentes: Berriart.com | Clubdesarrolladores.com