Vous avez peut-être déjà eu besoin de faire plusieurs bordures de couleurs différentes sur un seul bloc. Avec CSS3, c’est désormais jouable !

La technique la plus connue en CSS2, malgré sa limite à deux bordures, était :

.monbloc {
border:2px solid blue;
outline:2px solid red;
}

Heureusement, CSS3, avec son box-shadow, apporte une solution toute simple pour augmenter le nombre de bordures : Appliquer des ombres multiples, avec une diffusion de 0px et une épaisseur choisie.

.monbloc {
-webkit-box-shadow:  0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green;
-moz-box-shadow:  0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green;
box-shadow:  0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green;
}

La taille de chaque ombre est égale à celle de la bordure voulue, plus celle de l’ombre précédente.

Attention, deux inconvénients à cette technique :

  • elle n’est compatible qu’à partir d’IE9 (Donc à destination de 70% du public, selon CAN I USE)
  • Les ombres ne sont pas gérées dans le box-sizing de l’élément

Vous connaissez une meilleure technique (sans image?)

Tags : , ,