Des bordures pointillées même sous IE !

Le navigateur IE (Microsoft Internet Explorer) ne comprend pas certaines valeurs de la propriété CSS border-style qui permet de déterminer le style d’une bordure : filet simple ou double, en pointillé, tirets ou traits pleins... [1]. IE6 interpréte en particulier les dotted (pointillés) comme des dashed (tirets). Ce bug est corrigé aux versions suivantes, IE7 et IE8.

Il n’y a pas trente-six solutions de contournement : il faut jouer avec les background. C’est-à-dire utiliser une image de fond, représentant une bordure en pointillé. Ou un cadre aux dimensions de la boîte, si l’on souhaite non pas un simple filet, mais un encadrement ; ce qui impose une mise en page au pixel près, fixe et non plus relative. L’autre inconvénient est qu’il faut créer une image différente pour chaque bordure souhaitée... pfff !

Voici une jolie solution de contournement, simplifiée et polyvalente, qui utilise un background, et peut être utilisé pour toutes les bordures pointillées souhaitées, quelques soient leurs couleurs et leurs dimensions.
Voici l’astuce : j’utilise une image de 2 x 2 px, constituée de 2 pixels transparents, et 2 autres opaques assortis à la couleur du fond, disposés en quinconce. Tout dépend en effet, de la couleur du fond sur lequel se trouvera la boîte dont nous souhaitons une bordure en pointillé.

astuce.gif

1. Imaginons que nous posons cette boîte sur un fond blanc, directement celui du body (mais ça pourraît tout aussi bien être une autre div contenante). Je crée donc l’image, que j’appelle ici astuce.gif, avec 2 pixels opaques de couleur, blanche donc.

2. Voici le code HTML :

Notez bien qu’il faut deux boîtes l’une dans l’autre (des <div>, ou des <ul> et <li> si l’on veut faire une liste, ou...)

3. Voici le code CSS :

Notez bien que la couleur souhaitée pour la bordure, ici rouge, est appliquée en fond à la première div, et que la seconde div doit avoir la même couleur de fond, ici blanche, que le body.
C’est le padding de cette première div, qui, en créant un espace, donne l’illusion d’une bordure ;)

Tout ça pour remplacer un simple { border: 1px dotted red; } qu’IE est infichu de comprendre !