Comme pour les ombres sous les photos, j'utilisais jusqu'à présent des images avec les arrondis qui vont bien et les ombres associées en arrière plan.

Chaque élément constitutif d'une "zone" (billet, page... etc...) se voit muni de plusieurs images : une pour l'en tête (dont le titre), une pour le corps, une pour le bas. Dans deux tailles, normale et "extra-large" (comme pour les albums photos par exemple, avec le menu renvoyé en bas de page) et deux couleurs (le billet proprement dit et la zone de navigation d'un billet à l'autre).

Ce qui nécessite la gestion de 12 images, à modifier si je veux changer de couleur ou de largeur... Pas glop.

Maintenant, c'est terminé : je passe par un simple...

.post{
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  -khtml-border-radius: 12px;
  border-radius: 12px;
}

Et comme j'aime toujours les ombres et les découpes, j'ai ajouté pour les ombres...

.post{
  -moz-box-shadow: 1px 1px 6px 0 #000000;
  -webkit-box-shadow: 1px 1px 6px 0 #000000;
  -khtml-box-shadow: 1px 1px 6px 0 #000000;
  box-shadow: 1px 1px 6px 0 #000000;
}

et les découpes...

.post-title{
  -moz-box-shadow: inset 1px 1px 3px 0 #101010;
  -webkit-box-shadow: inset 1px 1px 3px 0 #101010;
  -khtml-box-shadow: inset 1px 1px 3px 0 #101010;
  box-shadow: inset 1px 1px 3px 0 #101010;
}

Si je veux changer la largeur ou la couleur de fond, ça se passe beaucoup simplement et le tout s'adapte automatiquement sans devoir refabriquer des images de fond. Franchement je me demande encore et toujours pourquoi je n'y ai pas pensé avant.

En même temps les utilisateurs de IE7 et de IE8 n'ont plus droits aux arrondis et aux ombres (sauf pour les vignettes qui restent pour l'instant gérées "à l'ancienne"). Z'ont plus qu'à installer IE9, s'ils le peuvent, mais dans ce cas ils n'auront toujours pas droit aux ombres sous les caractères.

Mieux : z'ont qu'à utiliser Firefox, Chrome, Safari ou Opera dans une version récente. J'ai testé avec Firefox 4.0 (et 3.6), Chrome 10.0, Safari 5.04 et Opera 11.01