Comment ajouter une bordure à une image en html?

Comment ajouter une bordure à une image en html?
Les images sont la partie la plus cruciale des pages Web utilisées pour rendre les sites Web plus attrayants et informatifs. De plus, les développeurs Web peuvent insérer différents types d'images, telles que des images d'arrière-plan, des illustrateurs et des images de produits. De plus, les utilisateurs peuvent appliquer différents styles aux images, comme définir les limites autour d'une image.

Cet article indiquera:

  • Comment ajouter une image dans HTML?
  • Comment ajouter / insérer une bordure à une image en HTML?
  • Comment ajouter / insérer une bordure à une image dans CSS?

Comment ajouter une image dans HTML?

Pour ajouter une image dans un document HTML, suivez les instructions répertoriées:

  • Tout d'abord, utilisez n'importe quelle étiquette d'en-tête "

    " pour "
    "Pour intégrer le cap. Par exemple, nous avons intégré le cap du niveau deux avec l'aide du «

    " étiqueter.

  • Ensuite, insérez un élément «» avec les attributs «classe», «SRC» et «Alt».
  • "»La balise est utilisée pour ajouter une image à un document HTML.
  • Le "classe»L'attribut est utilisé pour pointer la classe en CSS.
  • "SRC”Est ​​utilisé pour spécifier l'URL ou la source de l'image.
  • "alt»Spécifie un nom ou un texte alternatif pour l'image:

Ajouter une bordure à une image


On peut observer que l'image a été ajoutée avec succès à une page HTML:

Comment ajouter / insérer une bordure à une image en HTML?

Pour ajouter une bordure à une image dans HTML, utilisez le CSS en ligne directement dans la source d'image à l'aide d'instructions fournies:

  • Dans le "”TAG, spécifiez le"style" attribut. La valeur du «style» définit les propriétés de CSS pour styliser l'élément défini.
  • Afin d'appliquer une bordure autour de l'image, utilisez la valeur de style "Border: 5px vert massif;", où "frontière«La propriété CSS est-elle utilisée pour ajouter la limite autour de l'élément, selon le style spécifié:

Ajouter une bordure à une image


Sortir

Comment ajouter / insérer une bordure à une image dans CSS?

Les utilisateurs peuvent également ajouter une bordure à une image en HTML à l'aide de CSS intégrée. Pour ajouter une bordure à l'extérieur de l'image en utilisant le CSS, passez par les étapes fournies.

Étape 1: Style Heading in CSS
Tout d'abord, style en utilisant le nom de la balise "h2»Et appliquez les propriétés CSS mentionnées ci-dessous:

H2
Texte-aligne: Centre;
Couleur bleue;
Caractères gras;

Ici:

  • Le "alignement de texte»La propriété est utilisée pour définir l'alignement du texte.
  • "couleur»Spécifie la couleur particulière du texte.
  • "Police de caractère"Est utilisé pour allouer le style à la police.

Étape 2: Ajouter une bordure à une image
Pour ajouter une bordure autour de l'image, accédez d'abord à l'image en CSS à l'aide du «.IMG-Container" classe. Ensuite, appliquez les propriétés suivantes:

.IMG-Container
hauteur: 400px;
taille arrière: contenir;
Largeur: 350px;
Border: 7px RVB solide (63, 11, 253);
marge: 20px 150px;

La description des propriétés ci-dessus est la suivante:

  • "frontière»La propriété est utilisée pour spécifier la bordure autour de l'élément.
  • "hauteur”Est ​​utilisé pour régler la hauteur de l'élément défini.
  • "taille de l'arrière-plan»La propriété CSS est utilisée pour définir la taille de l'élément.
  • "largeur»Définit la taille de la largeur d'un élément.
  • "marge»Spécifie l'espace vide autour de la limite de l'élément:

On peut remarquer qu'une bordure bleue a été ajoutée autour d'une image.

Conclusion

Pour ajouter une bordure à une image en HTML, tout d'abord, ajoutez une image en utilisant le «" étiqueter. Ensuite, l'utilisateur peut utiliser le «style«Attribut à l'intérieur de la balise« »et définissez sa valeur selon les exigences. De plus, les utilisateurs peuvent également utiliser le CSS intégré pour appliquer le «frontière»Propriété à une image. Ce message a expliqué la procédure pour ajouter la bordure à une image en HTML.