Comment faire une boîte avec des bordures en images ou des coins arrondis ?
Astuce par Raphael (Eleveur de kiwiz, Strasbourg)
Les CSS, ou du moins leur implémentation actuelle par les navigateurs, montrent quelques limites dans l'habillage graphique des différents blocs qui composent une page. Ainsi, on peut vouloir « décorer » un bloc conteneur, quelle que soit l'importance de son contenu, avec des coins arrondis et/ou des bordures en images.
Traditionnellement, on réalisait ce type de mise en page à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables, pour dessiner les coins et les bordures. Cette technique est hélas peu accessible !
À partir du moment où l'on souhaite faire une boîte décorée avec une dimension fixe (hauteur ou, plus probablement, largeur), il existe une solution assez simple, ne nécessitant presque aucune surcharge dans le code HTML.
Elle est décrite en détails ici :
http://covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
Maintenant, pour réaliser ce genre de choses mais avec une boîte aux dimensions fluides, les choses se compliquent un peu. Voici un exemple de ce qu'il est possible de faire, hélas sans explications détaillées (voire le code source pour les détails) :
http://www.clb56.fr/test_css/test_4bordures/exemple_2/
Une solution plus détaillée:
http://covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html
D'autres techniques ici :








