Guillaume Duverger - Développement & Graphisme - Blog

Ajouter un coin arrondi à l'arrière-plan d'une bordure
Vous êtes ici : Accueil Blog > Tutoriels / astuces > CSS

Comment ajouter un coin arrondi à l'arrière-plan d'une bordure

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 :

CSS

.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. Nous allons utiliser les masques CSS (article complet sur ce blog).

CSS


.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);
	
	}


Ok, 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é. Essayons avec la propriété background-image :

CSS



.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 :

Vous ne voyez rien sur Firefox ? C'est normal (ou pas) . 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. Cela ne fonctionne pas sur Chromium.

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 :

CSS



.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 :

CSS



.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.

Du texte
CSS


	
.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 :

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

Vous rencontrez un problème avec ce tutoriel ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis du tutoriel ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.

haut page