本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. 区切り線
06 / DIVIDER 12 パーツ

CSS区切り線（hr）デザイン 12選

コピペで使えるおしゃれなCSS区切り線（hr）のサンプル集。シャッフルで色・太さのバリエーションを試せます。表示中のプレビューとコードは常に一致するので、気に入ったらそのままコピーしてください。クラス名は .bnto-hr-gradient 形式です。

該当するパーツが見つかりませんでした。

グラデーション線

.bnto-hr-gradient {
  height: 3px; border: none;
  background: linear-gradient(90deg,
    transparent, hsl(5 100% 65%), transparent);
}
使い方のコツ

両端が透明にフェードするので、余白と自然になじむ上品な区切りになります。90deg の左右に色を2つ並べれば2色グラデの線にもできます。

実線

.bnto-hr-solid {
  border: none;
  border-top: 2px solid hsl(202 73% 56%);
}
使い方のコツ

最も汎用的な区切り線。まず border: none; でブラウザ標準の線を消してから border-top で描き直すのがhrカスタマイズの基本パターンです。

破線

.bnto-hr-dashed {
  border: none;
  border-top: 2px dashed hsl(5 100% 65%);
}
使い方のコツ

実線よりも軽い印象になるので、カード内やリストの中など「小さな区切り」に向いています。破線の間隔を細かく制御したい場合はジグザグ線のような linear-gradient 方式を使います。

ドット線

.bnto-hr-dotted {
  border: none;
  border-top: 3px dotted hsl(119 31% 51%);
}
使い方のコツ

dotted は太さ＝ドットの直径。3px以上にすると丸がはっきり見えて、かわいい系のデザインと好相性です。1〜2pxでは破線とほぼ区別が付きません。

二重線

.bnto-hr-double {
  height: 7px; border: none;
  border-top: 2px solid hsl(327 53% 54%);
  border-bottom: 2px solid hsl(327 53% 54%);
}
使い方のコツ

線の間隔は height で調整します。上を太く・下を細くすると和風の「表罫・裏罫」風に。フォーマルな文書系デザインとも好相性です。

太ピル

.bnto-hr-pill {
  height: 5px; border: none;
  border-radius: 99px; width: 64%;
  background: hsl(150 58% 44%);
}
使い方のコツ

width: 64px; のように短くして見出しの下に置くと、アクセントバーとしても使えます。hrは margin: auto が初期値なので、幅を縮めても自動で中央に配置されます。

and more

テキスト入り

.bnto-hr-label {
  display: flex; align-items: center; gap: 16px;
  font-weight: 800; white-space: nowrap;
}
.bnto-hr-label::before,
.bnto-hr-label::after {
  content: ""; flex: 1;
  height: 2px; background: hsl(41 100% 50%);
}
使い方のコツ

両側の擬似要素に flex: 1 を与えることで、テキストの長さに関わらず線が左右いっぱいに伸びます。線の太さは height、文字との間隔は gap で調整してください。

中央ダイヤ

.bnto-hr-diamond {
  display: flex; align-items: center; gap: 14px;
}
.bnto-hr-diamond::before,
.bnto-hr-diamond::after {
  content: ""; flex: 1; height: 2px;
  background: hsl(5 100% 65%);
}
.bnto-hr-diamond i {
  width: 11px; height: 11px;
  background: hsl(5 100% 65%);
  transform: rotate(45deg);
}
使い方のコツ

ひし形は「正方形を rotate(45deg)」で作っています。border-radius: 50% を足せば丸ドットに、<i> を3つ並べれば3連マークにもアレンジできます。

ジグザグ線

.bnto-hr-zigzag {
  height: 10px; border: none;
  background:
    linear-gradient(135deg, hsl(258 47% 56%) 25%, transparent 25%) -10px 0,
    linear-gradient(225deg, hsl(258 47% 56%) 25%, transparent 25%) -10px 0;
  background-size: 20px 20px;
  background-repeat: repeat-x;
}
使い方のコツ

山の大きさは background-size（20px）と height（10px）をセットで変更します。ポップな印象が強いので、使うのは1ページに1〜2か所までが上品です。

波線

/* SVGをCSSに埋め込んだ波線（画像ファイル不要） */
.bnto-hr-wave {
  height: 12px; border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' width='24' height='12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='%233DA9E0' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 24px 12px;
}
使い方のコツ

色を変えるには data URI 内の stroke='%233DA9E0' を書き換えます（%23 は # のURLエンコード）。波の幅を変えたいときは background-size の 24px を調整してください。

斜めセクション区切り

/* 次セクションの背景色と同じ色にすると一体化します */
.bnto-hr-slant {
  height: 48px; border: none; margin: 0;
  background: hsl(178 55% 42%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
使い方のコツ

background を次のセクションの背景色に合わせると、セクション同士が斜めにつながって見えます。傾きの向きを反転したいときは polygon(0 0, 100% 100%, 0 100%) に変更してください。

手書き風

/* ゆるくうねる手書き風ライン（SVG埋め込み） */
.bnto-hr-hand {
  height: 14px; border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C30 3 55 12 85 7 S140 2 165 8 S190 9 197 6' fill='none' stroke='%238a7a63' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
使い方のコツ

preserveAspectRatio='none' と background-size: 100% 100% の組み合わせで、どんな幅でも1本のゆるい線として伸縮します。色は stroke='%238a7a63' を書き換えてください。

CSS区切り線（hr）デザインの基礎知識

区切り線（divider）は、コンテンツの意味の切れ目を視覚的に伝えるためのパーツです。長いページでも話題の変わり目がひと目で分かるようになり、読みやすさが大きく向上します。このページでは、コピペで使えるおしゃれなCSS区切り線を12種類掲載しています。波線・手書き風もCSS内に埋め込んだSVGで描いているため、画像ファイルの用意は不要です。

hr要素にはブラウザ標準の立体的なborderが付いているため、デザインする際はまず border: none; でリセットし、border-top や height + background で線を描き直します。掲載コードはすべてリセット込みなので、CSSタブのコードをスタイルシートへ、HTMLタブのコードをページへ貼り付けるだけで完成します。クラス名は .bnto-hr-〇〇 という独自プレフィックス付きで、既存のCSSと衝突しにくい設計です。

hr要素とborderの使い分け

「話題の区切り」という意味を持たせたい場所には <hr> を使いましょう。hrはスクリーンリーダーにも区切りとして伝わるセマンティックな要素です。一方、単に要素の下に線を引きたいだけなら、その要素に border-bottom を付ける方がHTMLがシンプルになります。テキスト入りの区切りだけは、hrが中身を持てないためdiv＋擬似要素で作ります。

線の太さ・余白のカスタマイズ

太さは border-top の値（または height）、長さは width で調整します。hrは左右のmarginがautoなので、幅を縮めれば自動的に中央寄せに。上下の margin を40〜80pxほど確保すると、区切りとしての効果がはっきりします。各カードの「シャッフル」ボタンを押せば色・太さの組み合わせをその場で試せて、コードも自動で書き換わります。

飾りすぎない区切りのコツ

hrデザインをコピペで揃えるときは、1ページに使う区切り線は1〜2種類までに絞るのが鉄則です。ジグザグや波線などの装飾的な線はアクセントとして要所だけに使い、通常の区切りには実線やグラデーション線など控えめなものを。色も本文より少し薄いトーンにすると、コンテンツの邪魔をしない上品な仕上がりになります。

よくある質問

hrタグのデフォルトの線を消すには？
hr要素にはブラウザ標準でborderによる線が付いています。まず border: none; でリセットし、border-top や height + background で新しい線を描き直すのが基本です。このページのコードはすべてリセット込みなので、そのまま貼り付ければ意図した見た目になります。
区切り線の長さや位置を調整するには？
width で長さを指定し、margin: 40px auto; のように左右を auto にすると中央寄せになります。上下の margin を大きめに取ると、セクションの切り替わりがより伝わりやすくなります。
テキスト入りの区切り線はhr要素で作れますか？
hrは中に文字を入れられない空要素のため、テキスト入りの区切り線はdiv要素で作ります。両側の線は ::before / ::after 擬似要素で描くので、HTMLはdivを1つ置くだけで完成します。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「実線」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

区切り線と組み合わせて使いやすいパーツはこちら。

見出し装飾 リスト装飾 背景パターン カード装飾