Dans cette courte astuce, nous allons voir comment il est possible d'ajouter une bordure double ÄÂ vos images comme l'exemple ci-dessous.
Et non vous n'allez pas utiliser la propriété border-style:double. De cette manière, vous n'aurez aucun contrôle sur le look de cette bordure. Imaginer que vous désirez une bordure externe de 3 pixels d'épaisseur verte et une bordure interne de 1 pixel orange ? Comment ferez-vous avez le border-style ? Il vous sera impossible de le faire. Alors, voici comment réaliser ce truc.
Nous allons donc utiliser ici la propriété border pour la bordure externe et ensuite nous allons truqué la bordure interne avec une combinaison des propriétés background et padding. Tout d'abord, commençons par ajouter la bordure à l'image.
img{
border:2px solid #72a143;
}
Ensuite voici le truc pour la 2e bordure.
img{
border:2px solid #72a143;
padding:1px;
background:#ffeda5;
}
L'image recevra alors une seconde bordure de 1 pixel de la couleur de l'arrière-plan désigné par la propriété background.