仕様

HR要素は、
区切りを表します。

hr区切り (Horizontal Rule)
カテゴリフローコンテンツ
種類空要素
この要素を
使用できる
状態		フローコンテンツを受け入れる要素。
許可されて
いる内容		なし
属性グローバル属性のみ
text / html
での
タグの省略		空要素の為、開始タグは必須で終了タグはありません。
許可されて
いるARIA		none, presentation.
[既定値 : separator]
DOM
インター
フェイス
HTMLHRElement
  1. [Exposed=Window]
  2. interface HTMLHRElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. };
レンダリング
フローコンテンツ
  1. hr {
  2. display: block;
  3. margin-block-start: 0.5em;
  4. margin-block-end: 0.5em;
  5. margin-inline-end: auto;
  6. margin-inline-start: auto;
  7. border-style: inset;
  8. border-width: 1px;
  9. overflow: hidden;
  10. color: gray;
  11. unicode-bidi: isolate;
  12. unicode-bidi: bidi-override;
  13. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 ブロック方向の前後(上下)の余白を0.5文字分空けます。 境界線を凹んで見える線の幅1pxで描画します。 内容は、パディングボックスに合わせて切り取られます。 などになります。

参加
コンテキスト		ブロックフォーマットコンテキスト
確立
コンテキスト		なし
hr要素は、区切りを表します。

hr要素は、段落レベルの主題の区切りを表します。

  1. <div>
  2. ABC
  3. <hr>
  4. DEF
  5. </div>
ABC
DEF
参照元
  1. HTML Living Standard. 4.4.2 The hr element
  2. HTML Living Standard. 15 Rendering 15.3.3 Flow content
  3. HTML Living Standard. 15 Rendering 15.3.11 The hr element
  4. HTML 5.2 W3C 勧告. 4.4.3 The hr element
  5. HTML 4.01 Specification W3C 勧告. 15.3 Rules: the HR element
  6. MDN Web Docs. HTML <hr>: 主題分割 (水平線) 要素

使用可能な箇所

フローコンテンツを
受け入れる要素に
配置できます。

hr要素は、フローコンテンツを受け入れる要素に配置できます。

  1. <div>
  2. <hr>
  3. </div>

フローコンテンツを配置できる div要素のコンテンツの一部として、hr要素を配置できます。

配置できるコンテンツ

配置可能なコンテンツは
ありません。

hr要素は空要素の為、内容(コンテンツ)を持ちません。

属性

グローバル属性のみ、
設定できます。

hr要素は、グローバル属性のみ 設定できます。

気を付ける点

境界線

  1. <hr style="height: 1em; border-color: blue;">

hr要素の高さと色を指定して、要素の何が「区切り」線として表現されているか見てみました。
「区切り」線として表現する為に、コンテンツのない(結果として高さ 0 )要素の上下左右の境界線が表されているのが判るかと思います。
ここから、単に境界線の幅を指定すると上下の和で２倍になったり、線種を２本線に指定すると上下で４本線となってしまう事が容易に推測されます。その為、cssで指定する場合は 上の線だけ用いて他はなしにする指定をするなど考慮が必要です。