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 :
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 avions utilisé la propriété border-image pour le dégradé.
Bordure avec background-image
Essayons maintenant avec la propriété background-image, bien que cela nous détourne de l'objectif initial, à savoir utiliser une bordure d'arrière-plan et d'y appliquer un arrondi :
Dans le code ci-dessus, vous noterez que la bordure est devenue invisible avec la 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 :
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, en appliquant cette méthode, 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
L'objectif était d'obtenir une bordure contenant une image, compatible avec un maximum de navigateurs et si possible avec un minimum de code. Jusqu'à présent, ce n'est pas une réussite.
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 :
Cependant, 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...
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 :
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.