Créer une boîte flexible aux coins ronds avec les CSS

La création de boîte avec des coins arrondies pour la mise en page de certains éléments est une pratique très courante, et les tutoriels pour faire ça avec les vieilles tables ne manquent pas. Par contre, comment faire avec des div et les CSS pour un site web moderne et conforme aux standards W3C? À première vue, on peut être tenté de simplement créer une image de fond statique et la placer avec l’instruction CSS background-image, mais comment faire une boîte aux coins arrondies qui s’ajustera automatiquement selon une quantité imprévisible de texte ou d’images, avec une taille indéterminée?

Commençons par créer la classe de div principale de la boîte, de couleur noire:

.boite-ronde {
margin: 0px;
padding: 0px;
background-color: black;
}

Ensuite, ajoutons les classes de div qui constituent les morceaux du haut et du bas, avec une hauteur définie de 10 pixels:

.boite-ronde-haut, .boite-ronde-bas {
height: 10px;
margin: 0px;
padding: 0px;
font-size: 0px; /* IE 6.0 bug */
}

Vous remarquerez la présence d’une instruction un peu bizarre, font-size: 0px;, celle-ci empêche les vieilles versions d’Internet Explorer pleines de bugs d’ajouter un espace superflu de 1px entre ces div et ceux qui suivront. C’est un vieux bug classique irritant.

Maintenant il nous faut créer des div flottants à gauche et à droite pour chaque coin arrondi. Ceux-ci sont des div utilisant la moitié de l’espace gauche et la moitié de l’espace droit, avec une image de fond ayant un coin arrondi et une très grande largeur, de façon à ce que lorsque le boîte s’élargit, l’image remplisse toujours l’espace affiché.

Voici les images:

Et le code CSS pour les placer:

.boite-ronde-haut-gauche, .boite-ronde-haut-droit, .boite-ronde-bas-gauche, .boite-ronde-bas-droit {
background-repeat: no-repeat;
height: 10px;
margin: 0px;
padding: 0px;
}

.boite-ronde-haut-gauche, .boite-ronde-bas-gauche {
float: left;
width: 50%;
}

.boite-ronde-haut-droit, .boite-ronde-bas-droit {
float: right;
width: 50%;
}

.boite-ronde-haut-gauche {
background-image: url('images/boite-ronde-haut-gauche.gif');
background-position: top left;
}

.boite-ronde-haut-droit {
background-image: url('images/boite-ronde-haut-droit.gif');
background-position: top right;
}

.boite-ronde-bas-gauche {
background-image: url('images/boite-ronde-bas-gauche.gif');
background-position: bottom left;
}

.boite-ronde-bas-droit {
background-image: url('images/boite-ronde-bas-droit.gif');
background-position: bottom right;
}

Tout est bientôt en place pour construire notre boîte, il nous reste juste le div du centre pour le contenu, donc ajoutons cette partie dans notre code CSS:

.boite-ronde-centre {
padding: 0px;
margin: 0px;
}

.boite-ronde-centre-contenu {
margin: 0px;
padding: 5px 15px 5px 15px;
color: black;
font-size: 12px;
}

La raison de créer 2 divs pour le contenu du centre vient du fait qu’il y a encore des conflits avec Internet Explorer et les navigateurs modernes comme Firefox ou Chrome dans la façon qu’ils interprètent le padding d’un div dans sa dimension totale. Certains l’ajoutent à la dimension totale alors que d’autres maintiennent cette dimension et diminuent l’espace intérieur. Avec un div extérieur comme .boite-ronde-centre, si on voulait lui donner une largeur fixe, pour une boite de largeur déterminée, en donnant le padding voulu au div intérieur, .boite-ronde-centre-contenu, sa taille ne sera pas affectée et le résultat sera le même parmi tout les navigateurs. On en profite pour donner toutes les instructions de formatage du contenu dans ce div intérieur, comme la couleur du texte, sa taille, etc.

Si vous en avez pas déjà, il nous faudra aussi une classe de div dont la fonction est simplement de réinitialiser le flot des éléments de la page qui contient des float avec l’instruction clear: both;, de façon à ce que les éléments qui suivent s’enlignent après les éléments flottants au lieu d’être placé sur les côtés. Cette classe de div est très pratique pour toutes les éventualités de ce genre dans une page CSS et constitue une classe assez standard dans un site web.

div.clearer {
clear: both; 
margin: 0px;
padding: 0px;
height: 0px;
line-height: 0px;
}

Donc notre code CSS final devrait être ce qui suit. Ça parait long, mais une fois en place dans votre fichier style, le code html dans la page web se trouve très simplifié, et on peut en faire appel partout sur le site web sans trop compliquer le code de la page:

.boite-ronde {
margin: 0px;
padding: 0px;
background-color: black;
}

.boite-ronde-haut, .boite-ronde-bas {
height: 10px;
margin: 0px;
padding: 0px;
font-size: 0px; /* IE 6.0 bug */
}

.boite-ronde-haut-gauche, .boite-ronde-haut-droit, .boite-ronde-bas-gauche, .boite-ronde-bas-droit {
background-repeat: no-repeat;
height: 10px;
margin: 0px;
padding: 0px;
}

.boite-ronde-haut-gauche, .boite-ronde-bas-gauche {
float: left;
width: 50%;
}

.boite-ronde-haut-droit, .boite-ronde-bas-droit {
float: right;
width: 50%;
}

.boite-ronde-haut-gauche {
background-image: url('images/boite-ronde-haut-gauche.gif');
background-position: top left;
}

.boite-ronde-haut-droit {
background-image: url('images/boite-ronde-haut-droit.gif');
background-position: top right;
}

.boite-ronde-bas-gauche {
background-image: url('images/boite-ronde-bas-gauche.gif');
background-position: bottom left;
}

.boite-ronde-bas-droit {
background-image: url('images/boite-ronde-bas-droit.gif');
background-position: bottom right;
}

.boite-ronde-centre {
padding: 0px;
margin: 0px;
}

.boite-ronde-centre-contenu {
margin: 0px;
padding: 5px 15px 5px 15px;
color: white;
font-size: 12px;
}

div.clearer {
clear: both; 
margin: 0px;
padding: 0px;
height: 0px;
line-height: 0px;
}

Voici le code html de la boîte:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Et voici à quoi devrait ressembler cette boîte. Maintenant à vous de lui donner une meilleure allure.

PS: Internet Explorer semble parfois avoir quelques problèmes avec des divisions d’espace de type 50% 50%, en ce cas, vous pouvez changer les valeurs pour 49% 51%, ça semble corriger le problème (hé oui, IE 6.0 est source de BIEN des maux de tête avec les CSS).