Utilisation de pseudo élément (s)
Vous pouvez positionner un pseudo élément de telle sorte qu'il soit soit derrière l'élément, et plus grand, créant un effet de bordure avec son propre arrière-plan, ou plus petit et à l'intérieur (mais assurez-vous que le contenu est positionné au-dessus).
L'élément nécessitant plusieurs bordures doit avoir sa propre bordure et son propre positionnement relatif.
.borders ( position: relative; border: 5px solid #f00; )La bordure secondaire est ajoutée avec un pseudo élément. Il est défini avec un positionnement absolu et incrusté de valeurs haut / gauche / bas / droite. Celui-ci aura également une bordure et sera conservé sous le contenu (en préservant, par exemple, la sélectionnabilité du texte et la cliquabilité des liens) en lui donnant une valeur z-index négative. Attention avec un z-index négatif, s'il se trouve dans un autre élément avec sa propre couleur d'arrière-plan, cela peut ne pas fonctionner.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Voir le Pen gbgRqZ de Chris Coyier (@chriscoyier) sur CodePen.
Vous pouvez également créer une troisième bordure en utilisant la :afterpseudo-classe. Notez en particulier que Firefox 3 (pré 3.6) visse cela en prenant en charge :afteret :before, mais en ne leur permettant pas d'être positionné de manière absolue (cela semble donc bizarre).
Utilisation du contour
Bien qu'il soit un peu plus limité que la bordure (contourne l'élément entier quoi qu'il arrive), le contour est une bordure supplémentaire libre.
.borders ( border: 5px solid blue; outline: 5px solid red; )Utilisation de box-shadow
Vous pouvez utiliser box-shadow pour créer un effet de bordure, en faisant le décalage de l'ombre et en ayant un flou de 0. De plus, en séparant les valeurs par des virgules, vous pouvez avoir autant de «bordures» que vous le souhaitez:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Voir le Pen xbgreX de Chris Coyier (@chriscoyier) sur CodePen.
Utilisation d'un arrière-plan découpé
Vous pouvez arrêter l'arrière-plan d'un élément avant le remplissage. De cette façon, une bordure normale d'éléments peut ressembler à une double bordure en quelque sorte.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Sur une entrée:
Voir l'effet Pen Double border sur par Chris Coyier (@chriscoyier) sur CodePen.