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

HTML

<p> Приклад використання атрибуту <code> width </code> </p>
<p id="text"> Поточна ширина зображення: 100 </p>
<input type="range" id="range" min="0" max="100" value = "100" step="1" name="range">
<input type="button" value="Встановити ширину" onclick="f()">
<hr>
<div class="block1" >
  <p> З використанням атрибуту <code> width </code> </p>
    <hr color="00ff00" id="hr">
</div>

<div class="block1" >
  <p> Без використання атрибуту <code> width </code> </p>
    <hr color="ff0000">
</div>

CSS

.header{
  text-align:center;
}

JS

function f() {
  var width = document.getElementById("range").value;
  var hr = document.getElementById("hr");
  hr.setAttribute("width", width + "%");
  text.innerHTML = "Поточна ширина лінії " + width + "%";
}
//# sourceURL=pen.js

HTML

<hr width="1000" color="#ff0000">
<hr width="500" color="#ff0000">
<hr width="250" color="#ff0000">
<hr width="125" color="#ff0000">
<hr width="10%" color="#ff00ff">
<hr width="25%" color="#ff00ff">
<hr width="50%" color="#ff00ff">
<hr width="100%" color="#ff00ff">

CSS

.header{
  text-align:center;
}

HTML

<p>1. <code>&lt;hr width="50%"&gt;</code> — застарілий атрибут</p>
<hr width="50%">

<p>2. <code>width: 50%</code> у CSS — той самий результат</p>
<hr class="half">

<p>3. Тільки <code>height: 8px</code> — лінія НЕ потовщала</p>
<hr class="tall">

<p>4. <code>border: none; height: 8px; background</code> — робочий рецепт</p>
<hr class="thick">

<p>5. Притиснути ліворуч: <code>margin-left: 0</code></p>
<hr class="thick left">

CSS

p { margin: 1.4em 0 .4em; font-size: .95rem; }

.half { width: 50%; }
.tall { width: 50%; height: 8px; }
.thick { width: 50%; height: 8px; border: none; background: #245ea8; border-radius: 4px; }
.left { margin-left: 0; }