Accueil >CSS >Bases de CSS >Comment faire une bordure en dégradé

Comment faire une bordure en dégradé

Créer des dégradés n’est pas difficile. Mais comment les utiliser dans une bordure ? Est-ce seulement possible ? Et si oui, comment ?

La propriété clé pour un dégradé dans la bordure d’un bloc est border-image, qui ne fonctionne qu’avec des blocs rectangulaires. Combinée avec border-radius, le résultat peut être différent.

.box {
  width: 250px;
  height: 250px;
  background: #eee;
  border: 20px solid transparent;
  border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
}

Dégradé de gauche à droite :

border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;

Dégradé en diagonale :

border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;