Crear esquinas redondeadas con CSS y sin imagenes

Hay muchas maneras de crear esquinas redondeadas con CSS, lo de usar tablas para crear este efecto quedó obsoleto hace ya bastante tiempo. Pero además de utilizar CSS la mayoría de las veces también se usan imágenes para lograr las esquinas redondas.

Personalmente prefiero no utilizar las esquinas redondas y ahorrarme ese momentito de carga de las imágenes.

Os voy a contar los dos métodos que conozco y que he utilizado para hacerlo cuando lo he necesitado. El primero lo copié de un widget de bitacoras.com (no me acuerdo cual) hace bastante tiempo. Es digamos bastante bruto, pero valida CSS, HTML y es compatible en casi cualquier navegador.

Código:

<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 10px;
		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>

La segunda opción es la que utilizo para los enlaces del menú superior del blog, está copiada del menú de Smashing Magazine, y es sin duda la opción que más me gusta. No es compatible con Internet Explorer 6, pero que queréis que os diga, ¡qué actualicen!

Código:

<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>

Como bonus track, os dejo esta otra manera, que como poco resulta muy curiosa, en la que consiguen la redondez utilizando un • (•) muy grande.