Aller au contenu principal
Guillaume Duverger Code & graphisme

Obtenir facilement un dégradé avec un coin arrondi en CSS

L'objectif de cette démonstration est de vous montrer une façon simple de créer un dégradé avec des coins arrondis sur un élément, en attendant l'hypothétique ajout de la valeur border-area de la propriété background-clip .

Dégradé avec coins arrondis



.degrade-bordure {

width: fit-content;
margin:4rem auto;
font-size: 2cap;
padding: .65cap 1cap;
border-radius: .75cap;
position: relative;
pointer-events: none;
	
&::before {

content: "";
position: absolute;
inset: 0;
padding: 5px;
background: linear-gradient(red,blue);
border-radius: inherit;
mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0); /*on masque l'interieur du dégradé, fonctionne avec un degrade lineaire, radial ou conique*/

}
	
	}