CSSで区切り線をデザイン｜hrタグで点線・破線・グラデーションも自在に

このページでは、CSSで区切り線（水平線）をデザインする方法を紹介しています。
<hr>タグを使って、点線・破線・グラデーション・文字付きなど、さまざまなスタイルの区切り線を作成できます。
HTMLやCSSでおしゃれな仕切り線を作りたい方は、ぜひ参考にしてください。

点線の区切り線

<hr class="hr1">
<style>
  .hr1{
    height:0px;
    border-top:2px dotted #000000;
    border-right:none;
    border-bottom:none;
    border-left:none;
    margin:0;
  }
</style>

破線の中間に文字がある区切り線

<hr class="hr2">
<style>
  .hr2{
    font-size:14px;  /* ここでフォントサイズ指定 */
    margin:1em 0 0 0;
    padding:0;
    height:1em;
    border-top:2px dashed #8888ff;
    border-right:none;
    border-bottom:none;
    border-left:none;
    text-align:center;
    overflow: visible;
    box-sizing:border-box;
  }
  .hr2::before{
    content:"区切り線のテキスト";
    position:relative;
    display:inline-block;
    top:-90%;
    padding:0 0.5em;
    margin:0;
    background-color:#e6e6e6; /* 背景色を設定する */
    font-size:1em;
    line-height:1em;
  }
</style>

グラデーション区切り線

<hr class="hr3">
<style>
  .hr3{
    border:none;
    margin:0;
    padding:0;
    height:2px;
    background:linear-gradient(
      90deg,
      rgba(255,128,128,0.1) 0%,
      rgba(255,128,128,1.0) 50%,
      rgba(255,128,128,0.1) 100%
    );
  }
</style>