Comment créer une bordure autour d'une image dans CSS3 - mannequins

Vidéo: COURS COMPLET HTML ET CSS [34/71] - Les bordures en CSS 2025

L'une des modifications les plus courantes que vous pouvez apporter à une image dans CSS3 est d'ajouter une bordure. Cela déclenche l'image de l'autre contenu sur la page. Bien sûr, CSS3 offre une large gamme de types de frontières. L'astuce consiste à afficher la bordure autour de l'image de telle sorte que vous puissiez effectuer ultérieurement d'autres tâches avec cette bordure.

C'est là que le code HTML entre en jeu. Il fournit un conteneur pouvant contenir toutes sortes de choses (comme le conteneur utilisé pour la balise

montrée dans l'exemple précédent) - et vous pouvez interagir avec ce conteneur de différentes manières. La procédure suivante vous aide à ajouter une bordure autour de l'image.

Créez un nouveau fichier CSS avec votre éditeur de texte.

Votre éditeur ne peut pas prendre en charge les fichiers CSS. Tout fichier texte fera l'affaire.
Saisissez les informations de style CSS suivantes.
```
#ImageContainer {border-style: groove; border-width: épais; border-color: gris; rembourrage: 5px; float: left;}
```
La majorité de cette information de style concerne la frontière. L'ajout de rembourrage à la bordure le fait ressortir plus comme un cadre. La valeur float conserve le contour de l'image, plutôt que de suivre le côté droit du navigateur, lorsqu'un utilisateur redimensionne la fenêtre du navigateur.

Si vous voulez que l'image soit sur le côté droit de la page, plutôt que sur la gauche, substituez float: right;. Le conteneur entier, image incluse, résidera sur le côté droit de la page, plutôt que sur la gauche. Lorsque l'utilisateur modifie la fenêtre du navigateur, l'image reste de la même taille, mais elle se déplace avec le côté droit de la fenêtre du navigateur.
Enregistrez le fichier sous SimpleGraphics. CSS.
Ajoutez le code suivant à la zone du fichier HTML.
Ce code crée le lien entre le fichier HTML et le fichier CSS.
Enregistrez le fichier HTML et rechargez la page.

Vous voyez la frontière.