Атрибут border тега <img> — рамка навколо зображення

HTML

<p>У цьому прикладі, Ви можете змінювати значення для властивості maxlength в межах від 0 до 100 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" min="0" max="100" step="1" value="0" id="range" onmousemove="f()"> 

<hr>

<div class="block1">
  <p> З використанням атрибута border  
  </p>
  <p class = "text"  style ="color:#c500c5">
    <img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Альтернативний текст" border="0"/> 
    <br>
      Марія Познанська
    <br><br>
         ВИПАВ СНІГ
    <br><br>
    Ой у лісі лист зів'яв! <br>
    Білий сніг у лісі впав<br> 
    На дубочки молоденькі,<br>
    На ялинки зелененькі.<br>
    <br>
    Притрусив сніг доріжки, <br>
    Всі горбочки, моріжки. <br>
    Біло-біло в лісі стало —<br> 
    Так багато снігу впало!<br>
    </p>
</div>

<div class="block2">
  
 <p> Без використанням атрибута border
  </p>
  <p style ="color:#c500c5">
<img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Альтернативний текст"/>
  <br>
   Марія Познанська
<br><br>
     ВИПАВ СНІГ
<br><br>
Ой у лісі лист зів'яв! <br>
Білий сніг у лісі впав<br> 
На дубочки молоденькі,<br>
На ялинки зелененькі.<br>
<br>
Притрусив сніг доріжки, <br>
Всі горбочки, моріжки. <br>
Біло-біло в лісі стало —<br> 
Так багато снігу впало!<br>
</div>

CSS

*{
  text-align:center;
}

.block1{
  float:left;
  border-right:1px solid;
}

.block2{
  float:left;
}

img{
  Width:50%;
}

JS

text.innerHTML = "Поточна товщина рамки: 0";
function f() {
  var range = document.getElementById("range").value;
  var element = document.getElementById("image");
  var text = document.getElementById("text");

  element.setAttribute("border", range);
  text.innerHTML = "Поточна товщина рамки:" + range;
}
//# sourceURL=pen.js

HTML

<p class="crimson">Атрибут: <img border="6" width="80" height="50" alt="Зразок"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' fill='%23f2b134'/%3E%3C/svg%3E">
    рамка 6px, колір — від кольору тексту абзацу.</p>

<p>Стилі: <img class="css-border" width="80" height="50" alt="Зразок"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' fill='%23f2b134'/%3E%3C/svg%3E">
    те саме через border: 6px solid, але колір задано окремо.</p>

<p>Пастка: <img class="only-width" width="80" height="50" alt="Зразок"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' fill='%23f2b134'/%3E%3C/svg%3E">
    задано лише border-width — рамки немає, бо типовий border-style дорівнює none.</p>

CSS

p {
    margin: 16px 0;
    max-width: 520px;
}

img {
    vertical-align: middle;
    margin: 0 6px;
}

.crimson {
    color: #c0392b;
}

.css-border {
    border: 6px solid #2f6fd0;
}

.only-width {
    border-width: 6px;
}