Introduction

Avez-vous déjà tenté d'ajouter un coin arrondi sur l'arrière-plan d'une bordure ? Si tel est le cas, vous avez sans aucun doute remarqué que cela n'était pas possible.

Ci-dessous, une bordure avec dégradé sans arrondi :

.bordure-sans-arrondi{
	
display: grid;
margin:2rem auto;
height: 25vmin;
width: 25vmin;
border: solid 2ch;
border-image: linear-gradient(hsl(248, 78%, 73%), hsl(180, 64%, 63%)) 1;
	

	}

Si vous tentez d'ajouter la propriété border-radius avec n'importe quelle valeur, vous constatez que rien ne se passe.

Il va donc falloir ruser...

Les masques CSS à la rescousse

Nous allons utiliser les masques CSS (article complet sur ce blog).

.bordure-arrondie{
	
display: grid;
margin:2rem auto;
height: 25vmin;
width: 25vmin;
border: solid 2ch;
border-radius: 2ch;
border-image: linear-gradient(hsl(248, 78%, 73%), hsl(180, 64%, 63%)) 1;
--grad: linear-gradient(red, red);
mask: var(--grad) content-box exclude, var(--grad);
	
	}

C'est mieux. Cela fonctionne sur Firefox, mais pas sur Chromium (la propriété mask n'étant pas standardisée). De plus, on constate que sur Firefox, le coin arrondi ne suit pas à l'intérieur de l'élément. Retour à la case départ.

Jusqu'ici nous avons utilisé la propriété border-image pour le dégradé.

Bordure avec background-image

Essayons maintenant avec la propriété background-image :

.bordure-arrondie{

margin: 2rem auto;	
display: grid;
border-radius: 3ch;
border: solid 2ch transparent;
width: 25vmin;
height: 25vmin;
background: linear-gradient(hsl(248, 78%, 73%), hsl(180, 64%, 63%)) border-box;
--grad: linear-gradient(red, red);
mask: var(--grad) content-box exclude, var(--grad);
		
		
	}	
	

Vous noterez que la bordure est devenue invisible (valeur transparent) et que le coin arrondi est supérieur à la bordure. Pourquoi ? Regardez plutôt le résultat si le coin arrondi est inférieur à la bordure :

On revient à la case départ.

De plus, si la bordure est égale au coin arrondi, nous n'obtenons plus le coin arrondi à l'intérieur de l'élément. Vous devez impérativement déclarer un coin arrondi supérieur à la bordure.

Parfait, nous obtenons enfin l'effet désiré ! Ah bah non. Si vous êtes sur Chromium, vous constatez que cela ne fonctionne pas.

Retour aux masques avec mask-composite

C'est marrant de se marrer, mais moi je veux juste ajouter un coin arrondi sur une bordure contenant une image et que ce soit compatible avec un maximum de navigateurs. Et si possible avec un minimum de code.

Tentons maintenant d'introduire la propriété mask-composite qui va nous permettre d'effectuer une opération de composition entre le masque situé sur la couche et le masque en dessous de notre élément :

.bordure-arrondie{

margin:2rem auto;	
border-radius: 2ch;
border: solid 2ch transparent;
width: 25vmin;
height: 25vmin;
display: grid;
background: linear-gradient(hsl(248, 78%, 73%), hsl(180, 64%, 63%)) border-box;
--grad: linear-gradient(red, red);
-webkit-mask: var(--grad) content-box, var(--grad);
-webkit-mask-composite: destination-out
		
		
	}	

Comme nous l'avons évoqué, la propriété mask-composite n'est compatible avec Chromium qu'en utilisant sa version non standard avec préfixe. Cela fonctionne sur Chromium, mais pas sur Firefox. Et toujours ce problème de coin arrondi qui n'est pas présent à l'intérieur de l'élément...

Je ne sais pas vous mais, en ce qui me concerne, je commence à perdre patience.

Heureusement, Firefox supporte le module CSS Masking Level 1. Donc, nous allons conserver les valeurs non-standard pour Chromium (en attendant le support) et ajouter la valeur exclude à la propriété mask-composite pour Firefox :

.bordure-arrondie{

margin:2rem auto;	
border-radius: 3ch;
border: solid 2ch transparent;
width: 25vmin;
height: 25vmin;
display: grid;
background: linear-gradient(hsl(248, 78%, 73%), hsl(180, 64%, 63%)) border-box;
--grad: linear-gradient(red, red);
-webkit-mask: var(--grad) content-box, var(--grad);
-webkit-mask-composite: destination-out;
mask: var(--grad) content-box, var(--grad);
mask-composite: exclude;
		
		
	}	

Ok, là, je crois que tout fonctionne à merveille.

Mais, car il y a encore un mais, le masque nous empêche de placer du texte à l'intérieur de l'élément, ce qui est plutôt logique dans ce cas-ci. Et une fois de plus, les pseudo-éléments viennent à la rescousse.

	
.bordure-arrondie-texte {

margin:2rem auto;	
width: 25vmin;
height: 25vmin;
display: grid;
place-items:center;
position:relative;

}
	
.bordure-arrondie-texte::before {
content:"";
position:absolute;
z-index:-1;
inset:0;
padding: 2ch;
border-radius: 3ch;
background: linear-gradient(hsl(var(--couleur1)), hsl(var(--couleur1-bis))) border-box;
--grad: linear-gradient(red, red);
-webkit-mask: var(--grad) content-box, var(--grad);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}	
		

Bonus : animation et transition CSS

Petit bonus, parce que ce tutoriel était assez pénible, autant se faire plaisir à présent avec les transitions et animations CSS :

Exemple avec transition :

	
@property --angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
		
.bordure-arrondie-all-trans{

--angle: 0;
margin: 2rem auto;	
border-radius: 3ch;
border: solid 2ch transparent;
width: 25vmin;
height: 25vmin;
display: grid;
background: linear-gradient(var(--angle),hsl(var(--couleur1)), hsl(var(--couleur1-bis))) border-box;
--grad: linear-gradient(red, red);
-webkit-mask: var(--grad) content-box, var(--grad);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
transition: --angle 1s;
}	
	

.bordure-arrondie-all-trans:hover{
	
--angle: 360deg
	
	
	}
	
		

Ci-dessous, le même exemple mais avec les animations CSS :

@property --angle1 {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}	
	
.bordure-arrondie-all-anim{

--angle1: 0;
margin: 2rem auto;	
border-radius: 3ch;
border: solid 2ch transparent;
width: 25vmin;
height: 25vmin;
display: grid;
background: linear-gradient(var(--angle1),hsl(var(--couleur1)), hsl(var(--couleur1-bis))) border-box;
--grad: linear-gradient(red, red);
-webkit-mask: var(--grad) content-box, var(--grad);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
animation: 2s rotate linear infinite;

}		
	
	
	
@keyframes rotate {

  to {
	
    --angle1: 360deg;
  }
}	

Mais (encore une fois), cela ne fonctionne que sur Chromium pour l'instant.