CSS : créer des blocs aux bords arrondis

Le point sur les différentes méthodes CSS permettant la création de blocs aux bords arrondis. Hauteur fluide ? Largeur fixe ? Utilisation d'image en background ?

Exemple 1: Bloc de largeur fixe, étirable en hauteur (mais pas à l'infinie !) :

XHTML:
<div class="box">
<div class="content-box">
<p>Lorem ipsum dolor sit a..... sagittis magna.</p>
</div>
</div>
<div class="box">
<div class="content-box">
<p>Lorem ipsum dolor sit a..... sagittis magna.</p>
</div>
</div>
<div class="box">
<div class="content-box">
<p>Lorem ipsum dolor sit a..... sagittis magna.</p>
</div>
</div>

CSS:
* {margin: 0;padding: 0;}/* zero out everything !*/
body {
background-color: #99CCCC;
color: #636363;
}
.box {
background: url(../box1.gif) no-repeat center top;
padding-top: 35px;/* correspond à la hauteur de l'image du haut  */
width: 200px;/*correspond à la largeur identique des deux images*/
float: left;
margin-left: 20px;
}
.content-box {
background: url(../content-box.gif) center bottom no-repeat;
padding-bottom: 30px;
}
.content-box P{
margin: 0 30px 0 30px;
}

Voici les images créées dans Photoshop (par exemple) avec un petit effet graphique (ombre portée) et plaquées en "background" via CSS :


images du bas (content-box): 200*465px, attention au débordement de votre contenu, l'image ne se répète pas ! voir exemple1 bis

Exemple 2: Même technique pour mettre en forme des "blocs menus":

XHTML:
<div class="box">
<div class="content-box">
<h2>Links</h2>
<ul>
<li><a id="h-home" accesskey="1" title="Page d'accueil" href="#">Home</a></li>
<li><a id="h-about" accesskey="2" title="Informations - Contact Webmaster - Sponsoring" href="#">About</a></li>
<li><a id="h-links" accesskey="3" title="Liens - Ressources webmaster" href="#">Links</a></li>
<li><a id="h-sitemap" accesskey="4" title="Sommaire - Table des matières" href="#">Sitemap</a></li>
<li><a id="h-download" accesskey="5" title="Téléchargements - Thèmes et kits graphiques" href="#">Download</a></li>
</ul>
</div>
</div>
....
....

CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #99CCCC;
color: #636363;
}
.box {
background: url(../box1.gif) no-repeat center top;
padding-top: 35px;
width: 200px;
float: left;
margin-left: 20px;
}
.box ul, .box li {
list-style: none;
margin-left: 20px;
}
.content-box h2 {
text-align: center;
position: relative;
top: -.7em;
}
.box li a {
text-decoration: none;
}
.box li a:hover {
text-decoration: underline;
}
.content-box {
background: url(../content-box.gif) center bottom no-repeat;
padding-bottom: 30px;
}
.content-box P{
margin: 5px 30px 0 30px;
}

Les images utilisées sont identiques à celles de l'exemple 1.

Exemple 3: Bloc de largeur fixe, étirable en hauteur à l'infinie (sans style graphique):

Cet exemple n'est valable que si votre "image Photoshop" est simple, à savoir juste les bords arrondis et une simple couleur de fond (pas d'effets graphiques supplémentaires).
L'étirement vertical sera assuré par une simple couleur de fond identique à celle de votre "image Photoshop".

XHTML:
<div class="box">
<div class="content-box">
<p>Lorem ipsum dolor sit a..... sagittis magna.</p>
</div>
</div>
<div class="box">
<div class="content-box">
<p>Lorem ipsum dolor sit a..... sagittis magna.</p>
</div>
</div>
<div class="box">
<div class="content-box">
<p>Lorem ipsum dolor sit a..... sagittis magna.</p>
</div>
</div>

CSS:
* {margin: 0;padding: 0;}
body {
background-color: #99CCCC;
color: #636363;
}
.box {
background: url(../box3.gif) no-repeat center top;
padding-top: 15px;
padding-bottom: 20px;/* pour écarter du bas de la fenêtre du navigateur */
width: 180px;
float: left;
margin:30px 0 0 20px;
}
.content-box {
background: #FF66CC url(../content-box3.gif) no-repeat center bottom;
padding-bottom: 20px;
}
.content-box P{
margin: 0 8px 0 8px;
}

Les deux images utilisées:

Exemple 4: Bloc de largeur fixe, étirable en hauteur à l'infinie (avec style graphique):

Nous obtiendrons ici le même effet que l'exemple 1, même les blocs pourront s'étirer en hauteur à l'infinie grâce à l'utilisation de trois images plaquées en fond.
Il faudra donc trois conteneurs différents pour accueillir les images de fond :

XHTML:
<div class="box">
<div class="content-box">
<p>Lorem ipsum dolor sit a..... sagittis magna.</p>
</div>
<div class="bottom-box">&nbsp;</div>
</div>
<div class="box">
<div class="content-box">
<p>Lorem ipsum dolor sit a..... sagittis magna.</p>
</div>
<div class="bottom-box">&nbsp;</div>
</div>
<div class="box">
<div class="content-box">
<p>Lorem ipsum dolor sit a..... sagittis magna.</p>
</div>
<div class="bottom-box">&nbsp;</div>
</div>

CSS:
* {margin: 0;padding: 0;}
body {
background-color: #99CCCC;
color: #636363;
}
.box {
background: url(../box1.gif) center top no-repeat;
padding-top: 35px;
width: 200px;
float: left;
margin-left: 20px;
}
.content-box {
background: url(../content-box4.gif) center top repeat-y;
}
.bottom-box {
background: url(../xmedia/images_webdesigncss/rounded/bottom-box4.gif) center bottom no-repeat;
height: 30px;
}
.content-box P{
margin: 0 30px 0 30px;
}

Les trois images utilisées:

On aurai obtenu le même résultat avec une balise span à la place de la div.bottom-box, comme ceci:

<span class="bottom-box"></span>
span.bottom-box {
background: url(../bottom-box4.gif) center bottom no-repeat;
display: block;
height: 30px;
width: 200px;
}

Exemple 5: avec la position absolue : bloc étirable en hauteur et en largeur (sans style graphique):

Fonctionne parfaitement sous Mozilla/Firefox, mais sous IE (6) on aperçoit (quand on fait varier la taille de la fenêtre à l'aide de la souris) des petits décalages de 1 pixel faisant apparaître les bords du conteneur principal.

XHTML:
<div class="box">
<div class="top_left"></div>
<div class="top_right"></div>
<div class="content-box">
.......
</div>
<div class="bottom_left"></div>
<div class="bottom_right"></div>
</div>

CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #99CCCC;
color: #636363;
padding: 25px;
}
.box {
width: 100%; /* une largeur doit être donnée !*/
position: relative;
margin-bottom: 25px;
background-color: #FF66CC;
}
.content-box {
position: relative;
padding: 13px;
z-index: 4;
}
.top_left, .top_right, .bottom_left, .bottom_right {
height: 20px;
width: 20px;
background-repeat: no-repeat;
position: absolute;
}
.top_left {
top: 0px;
left: 0px;
background-image: url(../images_webdesigncss/rounded/top-left.gif);
z-index: 0;
}
.top_right {
top: 0px;
right: 0px;
background-image: url(../xmedia/images_webdesigncss/rounded/top-right.gif);
z-index: 1;
}
.bottom_left {
bottom: 0px;
left: 0px;
background-image: url(../xmedia/images_webdesigncss/rounded/bottom-left.gif);
z-index: 2;
}
.bottom_right {
bottom: 0px;
right: 0px;
background-image: url(../../../xmedia/images_webdesigncss/rounded/bottom-right.gif);
z-index: 3;
}

Exemple 6: avec la position float : bloc étirable en hauteur et en largeur (sans style graphique):

XHTML:
<div class="box">
<div class="top_left"></div>
<div class="top_right"></div>
<div class="content-box">
.......
</div>
<div class="bottom_left"></div>
<div class="bottom_right"></div>
</div>

CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #99CCCC;
color: #636363;
padding: 25px;
}
.box {
margin-bottom: 25px;
background-color: #FF66CC;
}
.content-box {
}
.top_left, .top_right, .bottom_left, .bottom_right {
height: 20px;
width: 20px;
background-repeat: no-repeat;
}
.top_left {
background-image: url(../images_webdesigncss/rounded/top-left.gif);
}
.top_right {
background-image: url(../images_webdesigncss/rounded/top-right.gif);
float: right;
}
.bottom_left {
background-image: url(../images_webdesigncss/rounded/bottom-left.gif);
}
.bottom_right {
background-image: url(../images_webdesigncss/rounded/bottom-right.gif);
float: right;
}

Ce tutoriel est distribué sous une licence Creative Commons by-nc-sa 3.0. Consultez la page dédiée aux licences de distributions.