Le style CSS est un élément central de HTML utilisé pour rendre un site Web présentable. CSS permet différentes propriétés de style, dont l'une est la «image de frontière" propriété. À l'aide de la propriété mentionnée, vous pouvez définir une image comme une bordure d'un élément HTML au lieu du style de bordure typique.

Ce guide montrera comment utiliser la propriété CSS Border-Image.

Comment utiliser la propriété CSS Border-Image?

La propriété d'image de bordure est utilisée pour définir l'image comme une bordure autour d'un élément.

Syntaxe

La syntaxe de la propriété d'image de bordure est:

Image de bord

L'image des frontières est une propriété raccourci de CSS ayant cinq propriétés différentes telles que:

• Border-Image-source: Il est utilisé pour spécifier la source d'image.
• line d'image de bordure: Il est utilisé pour trancher l'image de la bordure.
• largeur de la frontière: Il est utilisé pour définir la largeur de la frontière.
• Border-Image-Outset: Il est utilisé pour définir la quantité d'espace que l'image de bordure prend du cadre de la bordure.
• Border-Image-Repeat: Il est utilisé pour éviter la répétition de l'image de la bordure et remplir la zone de la frontière.

Note: Si nous spécifions uniquement la source d'image au lieu de toutes les valeurs, la bordure d'image est définie en fonction des valeurs par défaut de ces propriétés.

Afin de comprendre parfaitement, passez à l'exemple pratique de la propriété de l'image frontalière.

Exemple: définir une image comme bordure avec une propriété d'image de bordure

Pour créer une bordure d'image autour d'un élément, ajoutez d'abord un élément dans un fichier html. Pour ce faire, nous créerons un et attribuerons un «frontière«Classe à lui. Après cela, nous ajouterons un titre et un paragraphe en utilisant

et

Mots clés.

Html

Linuxhint

Frontière d'image

Maintenant, passez à CSS et appliquez une propriété d'image frontalière au conteneur créé.

Ici, nous avons utilisé ".frontière«Pour accéder à la div créée dans le HTML. Ensuite, nous appliquerons le «frontière«Propriété à lui et définissez les valeurs de la frontière comme«30px" et "solide", respectivement. Dans la prochaine étape, nous utiliserons le «image de frontière”Propriété et définissez les valeurs de la source, de la tranche, de la largeur, du début et de la répétition comme«image.jpg","50","30px","40px", et "rond". En outre, nous attribuerons la valeur de la propriété textuelle comme «centre», Propriété de taille de police comme«50px», Et la propriété couleur comme«RVB (3, 59, 7)”Pour coiffer l'en-tête et le paragraphe.

CSS

.frontière
Border: 30px solide;
Border-Image: URL ('Image.jpg ') 50 / 30px 40px ronde;
Texte-aligne: Centre;
taille de police: 50px;
Couleur: RVB (3, 59, 7);

Une fois que vous avez implémenté le code mentionné ci-dessus, accédez au fichier HTML et exécutez-le. En conséquence, vous verrez la sortie suivante:

L'image donnée ci-dessus indique que la propriété d'image de bordure est mise en œuvre avec succès.

Exemple 2: Définition d'une image comme bordure avec des valeurs par défaut de la propriété d'image de bordure

Dans cet exemple, nous ne spécifierons la source de l'image que et vérifierons son effet sur la propriété Image-Border.
Ici, nous n'attribuerons que la source d'image comme «image.jpg”À la propriété d'image frontalière. Les propriétés restantes seront les mêmes, selon l'exemple précédent.

CSS

.frontière
Border: 30px solide;
Border-Image: URL ('Image.jpg ');
Texte-aligne: Centre;
taille de police: 50px;
Couleur: RVB (3, 59, 7);

Sortir

Ici, nous pouvons voir que la bordure d'image est placée uniquement aux coins du div. C'est parce que le «image de frontière»La propriété utilise des valeurs prédéfinies pour tous les paramètres restants.

Conclusion

Le "image de frontière»La propriété est utilisée pour définir l'image comme une bordure autour de tous les éléments HTML. Vous pouvez définir différentes valeurs de la propriété d'image de bordure pour styliser la bordure. Si vous ne spécifiez aucune valeur de ses paramètres, la propriété Image-Border appliquera son comportement par défaut. Dans cet article, nous avons expliqué comment ajouter une image en tant que bordure à l'aide de la propriété d'image de bordure.