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>

Demo:

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>

Demo:

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

Es una herramienta colaborativa y cualquiera con una cuenta de Google puede editarla al estilo wiki. Lo que quiere decir que además de los artículos que Google aporte se irá alimentando con los de los usuarios. De momento no hay muchos artículos y casi todos están en inglés pero estoy seguro de que pronto aumentará y los no anlgoparlantes ya tienen los primeros en español.

Por si aún no estáis convencidos de que ésta será algún día la guía de referencia por excelencia para el desarrollador web, decir que se encuentra bajo licencia Creative Commons y que se puede descargar tanto el código como los artículos mediante Subversion, que viene muy bien para instalarlo en local y poder consultarlo offline. Como ellos mismos dicen, y creo que con razón, un guía “by web developers, for web developers”.

Desde el .htaccess podemos indicarle al navegador cuanto tiempo queremos que cachee ciertos tipos de archivos. Como normalmente los que más tiempo permanecen inalterables son los JS, las imágenes, los iconos y los éstilos, añadiremos las siguientes líneas al .htaccess para cachearlos durante un año. (3600seg x 24h x 365dias = 31536000seg)

# == CACHEO EN NAVEGADOR ==
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType image/gif A31536000
ExpiresByType image/png A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/jpg A31536000
</IfModule>

Ésto le ahorrará al usuario que repite en tu web unos segundos de espera porque habrá bastantes archivos que su navegador guardará durante más tiempo. Pero ahora tenemos un problema si queremos cambiar alguna cosa, porque para verlo debemos borrar la caché del navegador. Por eso eso cuando llamemos a un CSS (es aplicable al resto de tipos de archivo) es mejor hacerlo de la siguiente manera: http://tudominio.com/styles/style.css?v1. Cómo el navegador cachea por URLs, añadiendo la versión como variable al final (?v1) hacemos que no cachee el archivo style.css sino el style.css?v1. Cuando lo modifiquemos bastará con cambiar la ruta a style.css?v2 y el navegador no usará la caché porque para él es un archivo nuevo.

Si además estamos programando, conviene meter en el archivo de configuración una variable con la versión y usarla a la hora de llamar a estos archivos, para que al hacer el cambio de versión lo tengamos que indicar en un solo sitio.

Pese a haberlo visto en muchos sitios, nunca me había dado por hacerlo y aunque se me ocurrieron varias ideas preferí ver como lo hacen los demás, que lo de reinventar la rueda no se lleva mucho por aquí. Después de ver varias opciones he decidido quedarme con un pequeño script, styleswitcher.js que podéis descargar en la web de su autor Poul Sowden, un sitio muy recomendable por cierto.

Me ha gustado porque enlaza las hojas de estilo tal como dice la W3C, y permite así cambar el estilo mediante los menús de algunos navegadores aparte de con los botones que pongas en la web. También porque con una pequeña cookie le hace el favor al usuario de recordar sus gustos para la próxima vez. Y por último, porque es muy sencillo de instalar, solo hay que colocar el script en el <head> del documento y llamar a una función desde el onClick de cualquier link.

Podéis seguir los pasos descritos en designshack, que es donde encontré el link hacia styleswitcher. Aparte podéis daros una vuelta por esa web porque es uno de esos sitios donde se puede disfrutar viendo geniales diseños CSS que sirven para inspirarse y aprender.

No había comentado nada aún sobre ello porque no lo había testeado, pero el otro día en un cambio de diseño me decidí a probarlo y la verdad, se merece un post porque me facilitó el trabajo de sobremanera. Lo que más me ayudó fue su “rejilla”, una hoja de estilos llamada grid.css que se compone de diferentes clases que te permiten crear la maquetación de una web haciendo todo tipo de combinaciones de columnas.

Como soporte para el framework existe este wiki, y para empezar con él este pequeño tutorial explicativo, aunque la verdad si sabes de CSS pocas explicaciones te haran falta para sacarle un gran provecho. El autor, Olav Bjorkoy, te informará de sus actualizaciones y demases en su blog, aunque yo espero estar atento y contártelas también porque me parece que ésta va a ser una de mis herramientas imprescindibles de trabajo. Por supuesto, libre.