Dans ce court tuto, nous allons voir comment ajouter une bordure CSS aux couleurs dégradées (gradient border) à une div afin de personnaliser votre design.

Sommaire

• 1. Préambule
• 2. Explications
• 3. Exemple

1. Préambule

Avant de commencer, notons deux choses :
-Il n’existe pas de méthode officielle ni d’API CSS pour réaliser ce type de dégradé en bordure.
-D’autres « hacks » permettent d’obtenir un résultat proche de celui que nous allons voir aujourd’hui, néanmoins nous avons choisi de retenir la méthode ci-dessous dans la mesure ou elle permet de conserver le « border-radius » de votre élément principal.

2. Explications

La méthode utilisée dans ce tuto consiste à associer un pseudo-élément « :before » dont le « background » se trouve être un dégradé CSS à l’arrière de notre élément html principal. Une fois notre pseudo-élément positionné, il suffit alors de nous assurer que ses dimensions sont supérieures à celles de l’élément principal pour obtenir un effet de bordure dégradée.

3. Exemple