Атрибут size тега <hr> — товщина горизонтальної лінії

<p><b>Приклад використання атрибуту <code>size</code>:</b><br><br>
<hr color="red" size="20">
  <p>Найважливіше призначення книги – зберігати знання, накопичені віками, і передати їх наступним поколінням. </p>
 <hr color="blue" size="10"> 
<p>Завдяки цьому став можливий стрімкий прогрес людства  в останні століття в галузі науки.  </p>
 <hr color="yellow" size="1"> 
<p>Більшість наукових відкриттів робиться на основі раніше накопиченої й систематизованої інформації.  </p>
 <hr color="green" size="4">

HTML

<div class="header">
  <p><b>Приклад використання атрибуту <code>size</code>:</b></p>
  
  <label>Введіть значеня атрибуту <code>size</code>  :  </label>
  <input type="number" name="number" id="number" min="0" max="100">
<p><input type="button" value="Встановити ширину" onclick="f()"></p>
  <p id="text"></p>
</div>
<hr>

<hr color="red" size="2" id="hr1">

CSS

.header{
  text-align:center;
}

JS

var hr = document.getElementById("hr1");
text.innerHTML = "Поточна ширина лінії : " + hr.size + "px";

function f() {
  hr.size = document.getElementById("number").value;
  text.innerHTML = "Поточна ширина лінії : " + hr.size + "px";
}
//# sourceURL=pen.js

HTML

<p class="cap">Без size — типова лінія, 2px на екрані</p>
<hr>

<p class="cap">size="10" — 10px усередині плюс дві рамки, на екрані 12px</p>
<hr size="10">

<p class="cap">size="10" noshade — рівно 10px</p>
<hr size="10" noshade>

<p class="cap">size="0" — лінія не зникає, лишається найтоншою</p>
<hr size="0">

<p class="cap">size="10px" — одиниці відкинуто, читається як 10</p>
<hr size="10px">

<p class="cap">Сучасна заміна: height: 10px, border: 0 — на екрані рівно 10px</p>
<hr class="css">

CSS

.cap {
    margin: 20px 0 6px;
    max-width: 560px;
    color: #5a6472;
    font-size: .92em;
}

hr {
    max-width: 420px;
    margin: 0;
    outline: 1px dashed #d64545;
    outline-offset: 4px;
}

.css {
    height: 10px;
    border: 0;
    background-color: #2f6fd0;
}