Comment Ajouter une Bordure à l'Image en CSS

Les cadres et les bordures font l'image plus influente et aident à se differencier de l'autre contenu de la page . Dans ce snippet, nous allons montrer comment ajouter des bordures à l'image.

L'élément <img> a un attribut border qui n'est pas utilisé après HTML5. Donc nous vous recommendons d'utiliser la propriété CSS border .

1. Créez HTML

  • Dans la section <body>, créez un élément <img> et mettez le lien de l'image qui doit être utilisée.
  • Définissez un nom pour l'image avec l'attribut alt qui donne d'informations sur l'image si un utilisateur ne peut pas la voir, pour quelque raison.
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">

2. Ajoutez CSS

  • Ajoutez de style à votre élément <img>.
  • Définissez width de l'image.
  • Définissez la largeur, le style et la couleur de la bordure à l'aide de la propriété CSS border.
img {
  width: 650px;
  border: 1px solid black;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 650px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

Comment Ajouter de Style à l'Image de la Bordure

Pour changer la couleur de la bordure, vous pouvez ajouter la propriété CSS color pour votre style.

Si vous voulez avoir une double bordure, vous devez simplement ajouter la propriété padding au style de l'image:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        width: 650px;
        padding: 1px;
        border: 1px solid #021a40;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de double bordure</h2>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

C'est aussi possible d'avoir la double bordure avec le différent couleur d'intérieure. Pour ce but, ajoutez la propriété background-color .

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        width: 650px;
        padding: 5px;
        border: 8px solid #999999;
        background-color: #e6e6e6;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

Vous pouvez aussi spécifier les bordures séparement. Pour ce but, utilisez les propriétés CSS border-bottom, border-top, border-left et border-right et définissez les différentes valeur de langeur pour chaque propriété. Voyons un exemple, dans lequel la propriété border-bottom est définie pour avoir l'effet de bannière.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        width: 225px;
        border: 8px solid #ccc;
        border-bottom: 130px solid #ccc;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" alt="Nature" />
  </body>
</html>

Pour donner du style à votre bordure d'image, ajoutez la propriété border-style à l'élément <style> .

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        width: 650px;
        padding: 5px;
        border: 12px #1c87c9;
        border-style: dashed;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

Comment Spécifier Chaque Coin et Avoir les Bordures Arrondis

Pour spécifier chaque coin de la bordure, vous devez utiliser la propriété CSS border-radius .

La propriété border-radius property peut avoir d'un à 4 valeurs. Voyons un exemple avec 4 valeurs:


Rappelez-vous que la première valeur s'applique au coin supérieur gauche, la deuxième valeur s'applique au coin supérieur droit, la troisième valeur s'applique au coin inférieur droit et la quatrième valeur s'applique au coin inférieur gauche.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        width: 650px;
        padding: 2px;
        border: 3px solid #1c87c9;
        border-radius: 15px 50px 800px 5px;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

Au lieu d'essayer d'imbriquer l'image dans un autre élément ou de modifier chaque image dans photoshop pour obtenir un rendu correct de la bordure de votre image, il vous suffit de définir la valeur de la propriété border-radius sur 50% ou 999em. Définir les mêmes valeurs de largeur et de hauteur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div.imageborder {
        border-radius: 999em;
        width: 350px;
        height: 350px;
        padding: 5px;
        line-height: 0;
        border: 10px solid #000;
        background-color: #eee;
      }
      img {
        border-radius: 999em;
        height: 100%;
        width: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de bordure arrondis</h2>
    <div class="imageborder">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" height="350" width="350" alt="iceland" />
    </div>
  </body>
</html>