Sorecson

La meilleure solution disponible pour créer des bords arrondis dans un Div en CSS / XHTML est la méthode des positions relatives, qui est bonne sémantiquement et dispose de beaucoup de possibilités graphiques tout en restant compatible avec la plupart des navigateurs.

Code XHTML :

<div class="relsample">
 <div class="top_left"></div>
 <div class="top_right"></div>
 <div class="content">Ceci est un exemple</div>
 <div class="bottom_left"></div>
 <div class="bottom_right"></div>
</div>

Code CSS :

.relsample { width: 250px; position: relative; background-color: #FF0000; }
.relsample .top_left, .relsample .top_right, .relsample .bottom_left, .relsample .bottom_right { height: 19px; width: 19px; background-repeat: no-repeat; position: absolute; background-color: #00FF00; }
.relsample .top_left { top: 0px; left: 0px; background-image: url("corner_top_left.gif"); z-index: 0; }
.relsample .top_right { top: 0px; right: 0px; background-image: url("corner_top_right.gif"); z-index: 1; }
.relsample .bottom_left { bottom: 0px; left: 0px; background-image: url("corner_bottom_left.gif"); z-index: 2; }
.relsample .bottom_right { bottom: 0px; right: 0px; background-image: url("corner_bottom_right.gif"); z-index: 3; }
.relsample .content { position: relative; padding: 12px; z-index: 4; }

Ce code est compatible avec IE6. Les possibilités graphiques sont très intéressantes.