Faire une double bordure sans image en css3

Aujourd’hui, je vais vous partager une astuce assez simple mais pas toujours connu des intégrateurs.

Cette technique vous permet de réaliser une double bordure en css3 facilement, ce qui vous permettra à la fois de vous passer complètement des images et donc d’optimiser le temps de chargement de votre site internet mais surtout de créer une classe globale que vous pourrez réutiliser à votre gré dans votre projet.

Je sais qu’il existe plusieurs façons de réaliser une double bordure en css sans image, mais je vous présente ma méthode que j’utilise quotidiennement et qui me convient parfaitement !

Comme vous vous en doutez, cette technique ne marche que pour les navigateurs récents, mais ne s’agissant que de contraintes visuels cela n’est pas gênant pour la navigation.

Code html :

.double_bordure { 
   border: 2px solid  #000; 
   -moz-box-shadow: 0 0 0 5px #000; 
   -webkit-box-shadow: 0 0 0 5px #0984AE; 
   box-shadow: 0 0 0 5px #0984AE; 
}

Apercu :

Contenu